详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）
•基于Promise的HTTP请求客户端，可同时在浏览器和Node.js中使用
•vue2.0之后，就不再对vue-resource更新，而是推荐使用axios，本项目也是使用axios
•功能特性
•在浏览器中发送XMLHttpRequests请求
•在node.js中发送http请求
•支持PromiseAPI
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换JSON数据
•客户端支持保护安全免受CSRF/XSRF（跨站请求伪造）攻击
封装使用
建议拆分三个文件
•src
->service
---->axios.js（axios配置，拦截器、统一url）
---->index.js（接口方法，里面调用api方法，供页面级调用）
---->api
------->index.js（api方法，里面调用后端提供的接口，供接口方法调用）
axios.js基本配置
'usestrict';
importaxiosfrom'axios';
//自动识别接口使用开发环境地址（开发环境地址做了proxyTable代理，故设置为空）或线上地址
axios.defaults.baseURL=process.env.NODE_ENV==='production'?process.env.API_ROOT:'';
//开发环境直接打包测试
//axios.defaults.baseURL='';
axios.interceptors.request.use(config=>{
returnconfig;
},error=>{
console.log(error);
returnPromise.reject(error);
});
axios.interceptors.response.use(res=>{
constapiRes=res.data;
returnapiRes;
},asyncerror=>{
console.dir(error);
returnPromise.reject(error);
});
exportdefaultaxios;
api/index.js调用后端提供的接口
importAxfrom'@/service/axios';
importqsfrom'qs';
exportdefault{
fetchBlog(reqData){
returnAx.get('/krryblog/blog/getBlog',{params:reqData});
},
addBlog(reqData){
returnAx.post('/krryblog/blog/addBlog',qs.stringify(reqData));
},
updateBlog(reqData){
returnAx.post('/krryblog/blog/updateBlog',qs.stringify(reqData));
},
deleteBlogCover(id,reqData){
returnAx.post(`/krryblog/blog/deleteBlogCover/${id}`,qs.stringify(reqData));
},
};
index.js接口方法（调用api）
importApifrom'./api';
exportasyncfunctiongetBlog(reqData){
letres=awaitApi.fetchBlog(reqData);
returnres;
},
exportasyncfunctionaddBlog(reqData){
letres=awaitApi.addBlog(reqData);
returnres;
},
exportasyncfunctionupdateBlog(reqData){
letres=awaitApi.updateBlog(reqData);
returnres;
},
exportasyncfunctiondeleteBlogCover(id,reqData){
letres=awaitApi.deleteBlogCover(id,reqData);
returnres;
},
页面调用
接下来就可以愉快地在页面调用了
import{getBlog}from'@/service'
exportdefault{
data(){
return{
tableData:[],
pageIndex:1,
pageSize:9
}
},
created(){
this.getList();
},
methods:{
asyncgetList(){
let{result}=awaitgetBlog({
pageIndex:this.pageIndex,
pageSize:this.pageSize
});
this.tableData=result.data;
},
}
axios执行多个并发请求
asyncgetList(){
letresArr=[]
for(letvalofthis.arrId){
//push请求
resArr.push(queryPropertyValue({id:val}))
}
this.tableData=[]
Promise.all(resArr).then(res=>{
for(letvalofres){
letvals=val.result.propertyValues
//每个请求的结果push到tableData
vals.forEach(item=>this.tableData.push(item))
}
})
},
或者直接在axios写promiseall
//根据id获取某一条商品数据
letgetDetail=(id)=>{
returnaxios.get(`/detail?bid=${id}`);
}
//检测登录的用户是否将此商品加入购物车
letdetectCar=(shopId,userId)=>{
returnaxios.get(`/detectCar?shopId=${shopId}&userId=${userId}`);
}
//获取一条商品数据、并且检测是否加入购物车
letgetDeAll=(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
leturl=config.url;
if(url.split('/').pop()==='getClassify'){
flag=false;
}else{
iView.LoadingBar.start();
flag=true;
}
returnconfig;
},error=>{
console.log(error);
returnPromise.reject(error);
});
如何判断所有请求加载完毕
letreqNum=0
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些操作，每次发出请求就reqNum++
reqNum++
_bus.$emit('showloading')
returnconfig
}
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){
returnAx.post('/index.php?krry',qs.stringify(reqData));
},
总结
以上所述是小编给大家介绍的详解axios中封装使用、拦截特定请求、判断所有请求加载完毕），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。