,在api目录下新建http.js。实现代码如下:importQsfrom'qs'importaxiosfrom'axios'importstorefrom'@/store'import*asutilsfrom'@/utils'//工具类import{Toast}from'mand-mobile'constinstance=axios.create({baseURL:'',//后端接口根目录message:true})//错误控制consterrorHandle=(status,message)=>{switch(status){case401://store.dispatch('logout')breakcase403:breakcase404:breakdefault:Toast.failed(message)}}//axios请求拦截器/*拦截器通常做什么? 1。修改请求头的部分配置项 2。在请求流程中添加一些请求图标 3.给请求添加参数*/instance.interceptors.request.use(config=>{consttoken=utils.env!=='dev'?store.state.auth.token:''token&&(config.headers.common.token=token)if(config.method==='post'&&config.data){if(Object.prototype.toString.call(config.data)!=='[objectFormData]'){config.data=Qs.stringify(config.data)}config.headers.common['Content-Type']='multipart/form-data'}returnconfig},error=>{returnPromise.reject(error)})/复制代码/响应拦截器,接收响应接口后的处理实例.interceptors.response.use(response=>{response.success=response.data.successif(response.config.message){if(!response.success){response.data.message&&Toast.failed(response.data.message)}else{response.config.method==='post'&&Toast.succeed(response.data.message||'操作成功')}}return响应},错误=>{const{响应}=错误响应?errorHandle(response.status,response.data.message||'网络连接失败,请稍后再试!'):Toast.info('网络连接失败,请稍后再试!')returnPromise.reject(error)})exportconstcreateAPI=(url,method,params,config={})=>{if(method==='get'){config.params=params}else{config.data=params}returninstance({url,method,...config})}exportdefaultinstance接口配置方法:新建index.jsimport{createAPI}from'./http'exportdefault{wxOuth:api中的paramsdirectory=>createAPI('/wechat/getOauthUrl','get',params)}最后在我们的vue组件中引入。import*asapifrom'@/api'调用方式为:api.wxOuth(params).then(res=>{}).catch(err=>{})
