axios拦截器参考iview-admin项目获取的拦截器可用于api请求的错误处理，包括请求拦截和响应拦截。axios既可以在前端项目中使用，也可以在node后端项目中使用，所以移植了这套。前端项目可以在libsrc/libs/axios.js下创建api.request.js和axios.js文件夹importaxiosfrom'axios'importstorefrom'@/store'//import{Spin}from'iview'constaddErrorLog=errorInfo=>{const{statusText,status,request:{responseURL}}=errorInfo让信息={type:'ajax',code:status,mes:statusText,url:responseURL}if(!responseURL.includes('save_error_logger'))store.dispatch('addErrorLog',info)}classHttpRequest{constructor(baseUrl=baseURL){this.baseUrl=baseUrlthis.queue={}}getInsideConfig(){constconfig={baseURL:this.baseUrl,headers:{//}}returnconfig}destroy(url){deletethis.queue[url]if(!Object.keys(this.queue).length){//Spin.hide()}}拦截器（实例，url){//请求拦截instance.interceptors.request.use(config=>{//添加全局加载...if(!Object.keys(this.queue).length){//Spin.show()//不建议开启，因为界面不友好}this.queue[url]=truereturnconfig},error=>{returnPromise.reject(error)})//响应拦截instance.interceptors.response.use(res=>{this.destroy(url)if(res.status===200){const{data,status}=resreturn{data,status}}},error=>{this.destroy(url)leterrorInfo=error.responseif(!errorInfo){const{request:{statusText,status},config}=JSON.parse(JSON.stringify(error))errorInfo={statusText,status,request:{responseURL:config.url}}}addErrorLog(errorInfo)返回Promise.reject(error)})}request(options){constinstance=axios.create()options=Object.assign(this.getInsideConfig(),options)this.interceptors(instance,options.url)returninstance(options)}}exportdefaultHttpRequestaddErrorLog是添加错误日志的方法，不用关注，这部分主要输出HttpRequest类包含request请求方法。request方法返回的是封装了这一步的拦截器和baseurl的axios实例。baseurl来自这里src/libs/api.request.js:importHttpRequestfrom'@/libs/axios'importconfigfrom'@/config'constbaseUrl=process.env.NODE_ENV==='development'?config.baseUrl.dev:config.baseUrl.proconstaxios=newHttpRequest(baseUrl)exportdefaultaxiosbaseurl的作用是如果配置了这个值，请求接口时会在请求url前面加上baseurl的值，而实际使用方法如下src/api/user.js:importaxiosfrom'@/libs/api.request'exportconstlogin=({userName,password})=>{constdata={userName,password}returnaxios.request({url:'login',data,method:'post'})}proxyProxy需要注意的是，如果vue使用代理，那么baseurl要设置为''，否则代理会没有成功。vue.config.js代码中有注释提到constpath=require('path')constresolve=dir=>{returnpath.join(__dirname,dir)}//项目部署基础//默认情况下，我们假设您的应用程序将部署在域的根目录中，//例如：https://www.my-app.com///默认值：'/'//如果您的应用程序部署在子路径中，那么您这里需要指定子路径//例如：https://www.foobar.com/my-app///需要改成'/my-app/'//iview-admin在线demo打包路径：https://file.iviewui.com/admin-dist/constBASE_URL=process.env.NODE_ENV==='生产'？'/':'/'module.exports={//项目部署基础//默认情况下，我们假设您的应用程序将部署在域的根目录中，//例如https://www.my-app.com///如果您的应用程序部署在子路径中，您需要在此处指定//子路径。例如，如果您的应用程序部署在//https://www.foobar.com/my-app///然后将其更改为'/my-app/'baseUrl:BASE_URL,//调整内部webpack配置。//参见https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md//如果不需要使用eslint，将lintOnSave设置为false以进行lintOnSave:false,chainWebpack:config=>{config.resolve.alias.set('@',resolve('src'))//key和value自己定义，比如.set('@@',resolve('src/components')).set('_c',resolve('src/components')).set('_v',resolve('src/view/components'))},//不生成时settofalse.mapfileproductionSourceMap:false,//这里写你调用接口的base路径，解决跨域，如果你设置了代理，那你本地开发环境的axios的baseUrl要写成'',即空字符串//devServer:{//proxy:'localhost:3000'//}devServer:{//open:process.platform==='darwin',//服务后默认打开浏览器已启动open:true,host:'0.0.0.0',port:8090,https:false,hotOnly:false,proxy:{//设置代理'/api':{target:'https://localhost:8090',changeOrigin:true,pathRewrite:{'^/api':'/'}}},before:app=>{}},}后端也可以参考前端axios配置
