结合axios对项目中的api请求进行封装操作
痛点：
1.后端对全部请求的url进行了调整。
2.后端要求给所有的请求头部添加一个token，或者对请求添加其他全局处理。
3.请求代码直接写在每个页面里，看起来代码臃肿，不够简练，太难管理。
4.看到请求代码,不明白该请求是干嘛的，语义化不够明显。...
上面列举的是一些常见的问题，如果没对api进行封装，当请求比较多的时候，修改起来欲哭无泪，解决这些问题可以进行以下操作
1.对axios进行二次封装
2.对全部api请求也进行封装
如下是对axios进行二次封装,文件名是network/index.js：
importaxiosfrom"axios";
importCookiesfrom"js-cookie";
//设置超时时间
constmyAxios=axios.create({
timeout:5000
});
//跳转登录页面
functionnav2Login(){
location.href='/xxxx/login'
}
//添加一个请求拦截器
myAxios.interceptors.request.use(
function(config){
//Dosomethingbeforerequestissent
config.headers["token"]=Cookies.get("token")||"";
returnconfig;
},
function(error){
//Dosomethingwithrequesterror
returnPromise.reject(error);
}
);
//添加一个响应拦截器
myAxios.interceptors.response.use(
function(response){
//Dosomethingwithresponsedata
//这里只是以200401为示例，其他状态码可以根据需要自行添加
if(response.status===200){
returnresponse.data;
}elseif(response.status===401){
nav2Login()
returnPromise.reject();
}else{
return{
status:0,
message:response.data.message
};
}
},
function(error){
//Dosomethingwithresponseerror
returnPromise.reject(error);
}
);
exportdefaultmyAxios;
下面是对全部的api进行了封装，文件名是network/api.js:
importaxiosfrom"./index.js";
constAPI={
userList:'api/user/all',//用户列表
cityList:'api/city/all',//城市列表
};
functionAxios(obj){
returnaxios({
...obj
}).catch(e=>{
//这里兜住error,从而不影响后续代码执行，避免出现白屏
return{
status:0,
message:"网络请求异常"
};
});
}
//给函数命名的时候尽量语义化
functiongetUserList(params){
returnAxios({
url:API.userList,
method:"post",
params
});
}
functiongetCityList(params){
returnAxios({
url:API.cityList,
method:"get",
params
});
}
exportdefault{
getUserList,
getCityList,
}
可以把这些请求挂载在一个全局的变量上，以Vue为例：
importVuefrom'vue'
importAppfrom'./App.vue'
importrouterfrom'./router'
importapifrom"@/network/api.js";
Vue.prototype.$api=api;
newVue({
router,
render:h=>h(App)
}).$mount('#app')
Vue项目中使用方法如下：
this.$api.getUserList(obj).then(res=>{
//处理res
}).catch(err){
//处理err
}
//或者使用asyncawait
asyncgetUserList(){
try{
constres=awaitthis.$api.getUserList(obj)
//处理res
}catch(err){
//处理err
}
}
补充知识：Vue项目中对axios进行封装以及api接口请求
对axios进行封装：
/*定义一个ajax请求函数，并且其返回值:promise对象(异步返回的数据是:response.data)*/
importaxiosfrom'axios';
exportdefaultfunctionajax(url,data={},type='GET'){
returnnewPromise(function(resolve,reject){
//执行异步ajax请求
letpromise
if(type==='GET'){
//准备urlquery参数数据,
letdataStr=''//数据拼接字符串
Object.keys(data).forEach(key=>{
dataStr+=key+'='+data[key]+'&'
})
if(dataStr!==''){
dataStr=dataStr.substring(0,dataStr.lastIndexOf('&'))
url=url+'?'+dataStr
}
//发送get请求
promise=axios.get(url)
}else{
//发送post请求
promise=axios.post(url,data)
}
promise.then(function(response){
//成功了调用resolve()
resolve(response.data)
}).catch(function(error){
//失败了调用reject()
reject(error)
})
})
}
以上这篇结合axios对项目中的api请求进行封装操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。