详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)


Posted in Javascript onApril 09, 2019

•基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用
•vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios
•功能特性
•在浏览器中发送 XMLHttpRequests 请求
•在 node.js 中发送 http请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换 JSON 数据
•客户端支持保护安全免受 CSRF/XSRF(跨站请求伪造) 攻击

封装使用

建议拆分三个文件

•src
 -> service
 ---->axios.js (axios 配置,拦截器、统一 url)
---->index.js (接口方法,里面调用 api 方法,供页面级调用)
---->api
 ------->index.js(api 方法,里面调用后端提供的接口,供接口方法调用)

axios.js 基本配置

'use strict';
import axios from 'axios';

// 自动识别接口使用开发环境地址(开发环境地址做了 proxyTable 代理,故设置为空)或线上地址
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_ROOT : '';
// 开发环境直接打包测试
// axios.defaults.baseURL = '';

axios.interceptors.request.use(config => {
 return config;
}, error => {
 console.log(error);
 return Promise.reject(error);
});

axios.interceptors.response.use(res => {
 const apiRes = res.data;
 return apiRes;
}, async error => {
 console.dir(error);
 return Promise.reject(error);
});

export default axios;

api/index.js 调用后端提供的接口
import Ax from '@/service/axios';
import qs from 'qs';

export default {
 fetchBlog (reqData) {
  return Ax.get('/krryblog/blog/getBlog', {params: reqData});
 },
 addBlog (reqData) {
  return Ax.post('/krryblog/blog/addBlog', qs.stringify(reqData));
 },
 updateBlog (reqData) {
  return Ax.post('/krryblog/blog/updateBlog', qs.stringify(reqData));
 },
 deleteBlogCover (id, reqData) {
  return Ax.post(`/krryblog/blog/deleteBlogCover/${id}`, qs.stringify(reqData));
 },
};

index.js 接口方法(调用 api)

import Api from './api';

export async function getBlog(reqData) {
 let res = await Api.fetchBlog(reqData);
 return res;
},
export async function addBlog (reqData) {
 let res = await Api.addBlog(reqData);
 return res;
},
export async function updateBlog (reqData) {
 let res = await Api.updateBlog(reqData);
 return res;
},
export async function deleteBlogCover (id, reqData) {
 let res = await Api.deleteBlogCover(id, reqData);
 return res;
},

页面调用

接下来就可以愉快地在页面调用了

import { getBlog } from '@/service'
export default {
 data() {
  return {
   tableData: [],
   pageIndex: 1,
   pageSize: 9
  }
 },
 created() {
  this.getList();
 },
 methods: {
  async getList() {
   let { result } = await getBlog({
    pageIndex: this.pageIndex,
    pageSize: this.pageSize
   });
  this.tableData = result.data;
 },
}

axios 执行多个并发请求

async getList() {
 let resArr = []
 for (let val of this.arrId) {
  // push 请求
  resArr.push(queryPropertyValue({ id: val }))
 }
 this.tableData = []
 Promise.all(resArr).then(res => {
  for (let val of res) {
   let vals = val.result.propertyValues
   // 每个请求的结果 push 到 tableData
   vals.forEach(item => this.tableData.push(item))
  }
 })
},

或者直接在 axios 写 promise all

// 根据 id 获取某一条商品数据
let getDetail = (id)=>{
 return axios.get(`/detail?bid=${id}`);
}

// 检测登录的用户是否将此商品加入购物车
let detectCar = (shopId,userId)=>{
 return axios.get(`/detectCar?shopId=${shopId}&userId=${userId}`);
}

// 获取一条商品数据、并且检测是否加入购物车
let getDeAll = (shopId,userId)=>{
 axios.all([
  getDetail(shopId),
  detectCar(shopId,userId)
 ]).then(axios.spread((resDetail, resCar)=>{
  // 两个请求现已完成
  // 打印两个请求的响应值 
  console.log(resDetail);
  console.log(resCar);
 }));
}

•实例的方法

axios#request(config)
axios#get(url [,config])
axios#delete(url [,config])
axios#head(url [,config])
axios#post(url [,data [,config]])
axios#put(url [,data [,config]])
axios#patch(url [,data [,config]])

•请求配置:只有url是必需的,如果未指定方法,请求将默认为GET

axios 拦截特定请求

业务上经常出现这个问题,需要拦截某些特定请求,在该特定请求,页面采取或不采取什么变化

研究 axios 的 request 统一拦截方法:axios.interceptors.request.use(function (config) {})

参数 config 如下:

可以发现 config.url 就是请求的接口的地址,那么 “/” 最后的 getClassify 就是该请求的方法,就可以通过取出该字符串来判断某些特定请求,从而做出怎样的变化

axios.interceptors.request.use(config => {
 // 判断请求是否是 getClassify,如果是 getClassify,不加载 LoadingBar
 let url = config.url;
 if (url.split('/').pop() === 'getClassify') {
  flag = false;
 } else {
  iView.LoadingBar.start();
  flag = true;
 }
 return config;
}, error => {
 console.log(error);
 return Promise.reject(error);
});

如何判断所有请求加载完毕

let reqNum = 0
axios.interceptors.request.use(function (config) {
 // 在请求发出之前进行一些操作,每次发出请求就 reqNum++
 reqNum++
 _bus.$emit('showloading')
 return config
}

axios.interceptors.response.use(response => {
 // 接受请求后 reqNum--,判断请求所有请求是否完成
 reqNum--
 if (reqNum <= 0) {
  _bus.$emit('closeLoading')
 } else {
  _bus.$emit('showloading')
 }
})

axios 的 post 请求 相关问题

•如果遇到 post 请求跨域问题,在 webpack 配置文件可以设置 proxyTable 处理跨域问题
•传送门:https://ainyi.com/27
•post 请求携带参数,需要做一次序列化:qs.stringify(reqData)

saveNormalAds (reqData) {
 return Ax.post('/index.php?krry', qs.stringify(reqData));
},

总结

以上所述是小编给大家介绍的详解axios中封装使用、拦截特定请求、判断所有请求加载完毕),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
KnockoutJs快速入门教程
May 16 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 #Javascript
javascript实现手动点赞效果
Apr 09 #Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
flexigrid 参数说明
2010/11/23 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2016新年问候语大全
2015/11/11 职场文书
Python Socket编程详解
2021/04/25 Python
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Java实现多线程聊天室
2021/06/26 Java/Android
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js