axios拦截器 config_axios拦截器的实现

拦截器设计与实现

#需求分析

我们希望能对请求的发送和响应做拦截，也就是在发送请求之前和接收到响应之后做一些额外逻辑。

我们希望设计的拦截器的使用方式如下：

// 添加一个请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前可以做一些事情

return config;

}, function (error) {

// 处理请求错误

return Promise.reject(error);

});

// 添加一个响应拦截器

axios.interceptors.response.use(function (response) {

// 处理响应数据

return response;

}, function (error) {

// 处理响应错误

return Promise.reject(error);

});

在 axios 对象上有一个 interceptors 对象属性，该属性又有 request 和 response 2 个属性，它们都有一个 use 方法，use 方法支持 2 个参数，第一个参数类似 Promise 的 resolve 函数，第二个参数类似 Promise 的 reject 函数。我们可以在 resolve 函数和 reject 函数中执行同步代码或者是异步代码逻辑。

并且我们是可以添加多个拦截器的，拦截器的执行顺序是链式依次执行的方式。对于 request 拦截器，后添加的拦截器会在请求前的过程中先执行；对于 response 拦截器，先添加的拦截器会在响应后先执行。

axios.interceptors.request.use(config => {

config.headers.test += '1'

return config

})

axios.interceptors.request.use(config => {

config.headers.test += '2'

return config

})

此外，我们也可以支持删除某个拦截器，如下：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/})

axios.interceptors.request.eject(myInterceptor)

#整体设计

我们先用一张图来展示一下拦截器工作流程：