实战VUE：增强axios（含完整代码）

2019-09-26 本文已影响0人全栈顾问

在前后端分离的Web应用中，前端需要大量访问后端的API。在VUE实现的应用中，我们可以通过封装axios包，增强并简化对API的访问。本文以如何实现在每个请求中都添加access_token为例，实战axios拦截器的开发。

文章有点长，想直接用或者看完整代码可以进：https://www.npmjs.com/package/tms-vue

Axios拦截器

Axios支持通过设置拦截器在发出request前和收到response后添加应用的处理逻辑。

请求拦截器

axios.interceptors.request.use(config => {
  ...
  return config
},  error =>{
  ...
})

响应拦截器

axios.interceptors.response.use(res => {
  ...
}, error => {
  ...
})

参考：https://www.npmjs.com/package/axios

设置拦截器

添加请求参数

axios.interceptors.request.use(config => {
  if (config) {
    if (!config.params) config.params = {}
    // 在params对象上设置需要添加的参数，例如：config.params.access_token='anyaccesstoken'
  }
  return config
}, err => Promise.reject(err))

通常，添加到拦截器里的请求参数是动态的，所以需要提供一种机制每次请求的时候动态指定参数的值，而不是固定死，后面会有解决方案。

处理失败响应

axios.interceptors.response.use(res => {
  // 根据响应的结果判断是否是业务失败
  if (res.data.code !== 0) {
    // 这里对业务失败的情况进行处理，例如：重发请求
  }
), err => Promise.reject(err))

这里也可以通过设置http status code进入响应失败的处理流程，但是我更多地是考虑处理业务逻辑失败的情况，所以习惯通过200返回一个json对象，在对象中再自定义错误码。

请求重发机制

在响应链接其中，可以直接重发请求。

axios.request(res.config)

axios实例

import axios from 'axios'

直接通过安装包引用的axios实例是全局的，每个引用的地方获得的实例都是同一个。如果给这个实例设置拦截机制，那么无法解决不同的业务模块需要不同的拦截机制的需求（也可以在拦截器中写判断的逻辑），例如：有些请求不添加access_token参数。

Axios支持通过create方法创建新实例。

let myAxios = axios.create()

增强axios的整体思路

创建独立的axios实例，给每个实例设置各自的拦截器，并且提供一种实例管理机制。
需要根据响应内容决定是否需要重发。
请求拦截器和响应拦截器可能存在对应关系，例如：如果响应失败了需要修改请求的参数。
需要解决反复重发请求的问题。

针对上述问题设计一个拦截规则类，用来描述拦截需求。

class InterceptorRule {
    /**
     * 拦截规则
     * 
     * @param {Map<string,string>} requestParams 请求中添加参数，key作为名称，value作为值 
     * @param {function} 响应失败时，尝试重发请求 
     */
    constructor({ requestParams, onRetryAttempt }) {
        this.requestParams = requestParams
        this.onRetryAttempt = onRetryAttempt
    }
}

自定义一个新的axios的类，支持对实例进行命名，指定拦截规则。

class TmsAxios {
    /**
     * 
     * @param {object} options 
     * @param {string} options.name 名称 
     * @param {Array<InterceptorRule>} options.rules 拦截规则
     * @param {object} options.config 默认axios实例配置规则
     */
    constructor({ name = null, rules = null, config = null } = {}) {
        ......
    }
}

实现access_token

获得access_token的逻辑是独立的，要每个应用自己实现，这里假定已经有个接口/auth/token可以获得accessToken。

设置拦截规则

每条拦截规则中包含了请求参数和重发请求两部分，重发请求的中可以设置请求参数。

let rule = Vue.TmsAxios.newInterceptorRule({
    requestParams: new Map([
        ['access_token', accessToken]
    ]),
    onRetryAttempt: (res, rule) => {
        if (res.data.code === 20001) // 响应代码说明access_token不可用
            return Vue.TmsAxios('auth').get(`/token`)
                .then(() => {
                    let { access_token } = res.data.result
                    // 重新设置请求参数
                    rule.requestParams.set('access_token', access_token)
                    return true
                }).catch((err) => Promise.reject(err))
        return Promise.resolve(false)
    }
})

创建axios实例，给实例指定名称。因为主要是在Vue中，所以和Vue绑在了一起。

Vue.TmsAxios({ name: 'api-ue', rules: [rule], config: { baseURL: '/api/ue/' } })

内部实现

在包里创建个Map的实例，保存所有创建的实例。

const instances = new Map()

在请求拦截器中，添加拦截规则中指定的请求参数。这里支持多个拦截规则。

function useRequestInterceptor(tmsAxios, rules) {
    tmsAxios.interceptors.request.use(config => {
        if (config) {
            if (!config.params) config.params = {}
            rules.forEach(rule => {
                if (rule.requestParams) {
                    rule.requestParams.forEach((v, k) => {
                        config.params[k] = v
                    })
                }
            })
        }
        return config
    }, err => Promise.reject(err))
}

在响应拦截器中，添加尝试重发逻辑。这里也支持多个拦截规则。每个规则都可以决定是否需要重发，用到了Promise.all()。Promise.all()的规则是多个Promise，只要有一个失败（reject）就失败，所有都成功（resolve）才成功。所以，每个重发请求规则中，返回true代表重发，返回false代表每意见，返回reject代表不能重发。另外，为了保证避免无限制地进行重发，在请求头中添加了TmsAxios-Retry字段，通过这个字段限制只允许进行一次尝试。（但是，如果确实需要多次重发，可以考虑在规则中重置这个头。）

function useResponseInterceptor(tmsAxios, rules) {
    tmsAxios.interceptors.response.use(res => {
        if (res.data.code !== 0) {
            if (undefined === res.config.headers['TmsAxios-Retry']) {
                if (rules && rules.length) {
                    let retryPromises = []
                    rules.forEach(rule => {
                        if (rule.onRetryAttempt)
                            retryPromises.push(rule.onRetryAttempt(res, rule))
                    })
                    if (retryPromises.length) {
                        // 只允许尝试1次重发
                        res.config.headers['TmsAxios-Retry'] = 1
                        // 只要有1个规则支持重发就重发
                        return Promise.all(retryPromises)
                            .then(values => values.includes(true) ? tmsAxios.request(res.config) : Promise.reject(res.data))
                    }
                }
            }
            return Promise.reject(res.data)
        }
        return res
    }, err => Promise.reject(err))
}

绑定到Vue上

为了便于在Vue中使用，将TmsAxios做成插件（plugin），并并且提供工厂方法。

export default function install(Vue) {
    Vue.TmsAxios = TmsAxios.ins
    Vue.TmsAxios.newInterceptorRule = TmsAxios.newInterceptorRule
    Vue.TmsAxios.remove = TmsAxios.remove
    Vue.prototype.TmsAxios = Vue.TmsAxios
}

参考

tms-vue

axios源码解析

vue中使用axios的多种方式