在前后端分离的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
}
