当前位置: 首页 > Web前端 > vue.js

基于Vue的axios二次包装

时间:2023-03-31 23:00:01 vue.js

完整代码importaxiosfrom'axios'importQSfrom'qs'importstorefrom'../store'importrouterfrom'../router'import{Message}from'element-ui'//请求域名axios.defaults.baseURL=process.env.VUE_APP_API_URL;//请求超时axios.defaults.timeout=10000;//post请求头axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';//请求拦截器axios.interceptors.request.use(config=>{//每次发送请求前判断是否有token,如果有则添加到http的header中request统一放在token上,不需要每次请求都手动添加//即使token本地存在,token也可能过期,所以返回状态要在响应拦截器中判断consttoken=store.state.token;token&&(config.headers[store.state.tokenName]=token);returnconfig;},error=>{returnPromise.error(error);})//响应拦截器axios.interceptors.response.use(response=>{if(response.status===200){returnPromise.resolve(response);}else{returnPromise.reject(response);}},//当服务器状态码不是200error=>{if(error.response.status){switch(error.response.status){//404请求不存在case404:Message({showClose:true,message:'网络请求不存在',type:'error'})break;case500:Message({showClose:true,message:error.response.data.message?error.response.data.message:'Servererror',type:'error'})中断;//其他错误直接抛出错误信息default:Message({showClose:true,message:response.data.msg,type:'error'})}返回Promise.reject(error.response);}});/**get方法,对应get请求@param{String}url[请求的url地址]@param{Object}params[请求携带的参数]*///请求,判断请求methodexportdefaultfunctionrequest(api,params={}){/*这里使用api方法来区分请求方式。api写法如下,可以自行调整Login:{url:'/login',methods:'post'}*/if(api.methods=='post'){returnnewPromise((resolve,reject)=>{axios.post(api.url,QS.stringify(params)).then(res=>{if(!res.data.success){Message({showClose:true,message:res.data.味精,类型:'错误'})}else{resolve(res.data);}}).catch(err=>{reject(err.data)})});}elseif(api.methods=='get'){返回新的Promise((resolve,reject)=>{axios.get(api.url,{params:params}).then(res=>{if(!res.data.success){Message({showClose:true,message:res.data.msg,类型:'error'})}else{resolve(res.data);}}).catch(err=>{reject(err.data)})});}}

最新推荐
猜你喜欢