axios拦截器
参考iview-admin我的项目所得
拦截器能够用于api申请的错误处理，包含申请拦挡和响应拦挡。axios既能够用着前端我的项目也能够用在node后端我的项目中，所以把这套移植过去。
前端我的项目能够在lib下创立api.request.js和axios.js文件夹src/libs/axios.js
import axios from 'axios'import store from '@/store'// import { Spin } from 'iview'const addErrorLog = errorInfo => { const { statusText, status, request: { responseURL } } = errorInfo let info = { type: 'ajax', code: status, mes: statusText, url: responseURL } if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)}class HttpRequest { constructor (baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } getInsideConfig () { const config = { baseURL: this.baseUrl, headers: { // } } return config } destroy (url) { delete this.queue[url] if (!Object.keys(this.queue).length) { // Spin.hide() } } interceptors (instance, url) { // 申请拦挡 instance.interceptors.request.use(config => { // 增加全局的loading... if (!Object.keys(this.queue).length) { // Spin.show() // 不倡议开启，因为界面不敌对 } this.queue[url] = true return config }, error => { return Promise.reject(error) }) // 响应拦挡 instance.interceptors.response.use(res => { this.destroy(url) if (res.status === 200) { const { data, status } = res return { data, status } } }, error => { this.destroy(url) let errorInfo = error.response if (!errorInfo) { const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error)) errorInfo = { statusText, status, request: { responseURL: config.url } } } addErrorLog(errorInfo) return Promise.reject(error) }) } request (options) { const instance = axios.create() options = Object.assign(this.getInsideConfig(), options) this.interceptors(instance, options.url) return instance(options) }}export default HttpRequestaddErrorLog是增加谬误日志的办法，可不关注，这部分次要是输入了HttpRequest这个类，外面蕴含request申请办法。request办法返回的其实是这一步封装拦截器和baseurl的axios实例。
baseurl是从上面这里来的src/libs/api.request.js:
import HttpRequest from '@/libs/axios'import config from '@/config'const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.proconst axios = new HttpRequest(baseUrl)export default axiosbaseurl的作用是，如果配置了这个值，那么申请接口的时候会把baseurl的值增加在申请url的后面，理论应用办法如下src/api/user.js：
import axios from '@/libs/api.request'export const login = ({ userName, password }) => { const data = { userName, password } return axios.request({ url: 'login', data, method: 'post' })}proxy代理
须要留神的是，vue应用了代理，那么要把baseurl设置为' ' ，否则代理不胜利。vue.config.js代码中有正文提到
const path = require('path')const resolve = dir => { return path.join(__dirname, dir)}// 我的项目部署根底// 默认状况下，咱们假如你的利用将被部署在域的根目录下,// 例如：https://www.my-app.com/// 默认：'/'// 如果您的应用程序部署在子门路中，则须要在这指定子门路// 例如：https://www.foobar.com/my-app/// 须要将它改为'/my-app/'// iview-admin线上演示打包门路： https://file.iviewui.com/admin-dist/const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'module.exports = { // Project deployment base // By default we assume your app will be deployed at the root of a domain, // e.g. https://www.my-app.com/ // If your app is deployed at a sub-path, you will need to specify that // sub-path here. For example, if your app is deployed at // https://www.foobar.com/my-app/ // then change this to '/my-app/' baseUrl: BASE_URL, // tweak internal webpack configuration. // see 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')) }, // 设为false打包时不生成.map文件 productionSourceMap: false, // 这里写你调用接口的根底门路，来解决跨域，如果设置了代理，那你本地开发环境的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来配置