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

vue3axios封装接口请求

时间:2023-03-31 15:29:48 vue.js

1、安装axiosvue在项目中添加axios2,main.jsimport'./plugins/axios'//安装axios3后自动添加这一行./plugins/axios.jsimportaxiosfrom'axios'importqsfrom'qs'import{ElMessage}from'element-plus';consthttp={}constAxios=axios.create({timeout:200000,withCredentials:true,//自动携带cookiebaseURL:'',//接口地址headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},validateStatus(status){returnstatus>=200&&status<300}});//请求拦截Axios.interceptors.request.use(config=>{//如果需要在header中带token,这里配置returnconfig},err=>{returnPromise.reject(err)})//响应拦截Axios.interceptors.response.use(res=>{returnres;},err=>{switch(err.response.status){case400:ElMessage({showClose:true,message:'requesterror',//这里可以换成那个接口返回Errormessagetype:'error'});break;case401:ElMessage({showClose:true,message:'授权失败,请重新登录',//这里可以换成接口返回的错误信息type:'error'});返回;case422:ElMessage({showClose:true,message:'参数错误,请检查填写的参数',//这里可以换成接口返回的错误信息type:'error'});返回;case403:ElMessage({showClose:true,message:'Accessdenied',//可以用接口返回的错误信息代替type:'error'});休息;case404:ElMessage({showClose:true,message:'请求错误,未找到资源',//这里可以换成接口返回的错误信息type:'error'});休息;case500:ElMessage({showClose:true,message:'请重新登录',//这里可以换成接口返回的错误信息type:'error'});休息;返回承诺。拒绝(错误);})http.get=function(url,data={}){returnnewPromise((resolve,reject)=>{Axios.get(url,{params:data}).then(res=>{resolve(res);}).catch(err=>{reject(err);})})}http.del=function(url,data={}){returnnewPromise((resolve,reject)=>{Axios.delete(url,{params:data}).then(res=>{resolve(res);}).catch(err=>{reject(err);})})}http.post=function(url,data){returnnewPromise((resolve,reject)=>{Axios.post(url,qs.stringify(data)).then(res=>{resolve(res);}).catch(err=>{reject(err);})})}exportdefaulthttp4、封装请求接口url.js:请求的路径index.js:封装的接口方法url.jsconsturl={'Login':'/login','Test':'/test',}module.exports=url;index.jsimportaxiosfrom'@/plugins/axios'importurlfrom'./url.js'letAPI={};//登录API.login=function(data){returnaxios.post(url.Login,data);}//获取测试内容API.getTest=function(){returnaxios.get(url.Test);}exportdefaultAPI5,调用接口importAPIfrom'@/api/index.js'exportdefault{name:'login',data(){return{adminForm:{username:'',password:''},}},方法:{submitForm(){letself=this;API.login(self.adminForm).then(res=>{console.log(res)})}}}