结合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请求进行封装操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。