axios response拦截 多个 只一次
在前端开发中，我们常常需要向服务器发送请求来获取数据。而使用axios是一个非常常见的选择，它是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。
然而，在实际开发中，我们有时候需要对每个响应进行一些公共的处理，比如检查响应状态码、统一处理错误等。这时候，就需要使用axios的拦截器来实现。
Axios拦截器允许我们在请求发送之前和响应返回之后对请求和响应进行全局处理。我们可以通过添加拦截器来实现对请求和响应的修改、取消、重试等操作。
拦截器简介
Axios拦截器包括请求拦截器和响应拦截器，分别对请求和响应进行处理。
请求拦截器会在请求发送之前执行，可以用来对请求进行修改、取消、添加headers等操作。
响应拦截器会在响应返回之后执行，可以用来对响应进行统一处理、错误处理等操作。
我们可以通过axios.interceptors.request.use和axios.interceptors.response.use来添加拦截器。
单个拦截器
首先，让我们从一个单个的拦截器开始，我们将实现一个简单的功能：在每个请求的header中添加Authorization字段。
axios.interceptors.request.use(function (config) {
config.headers.Authorization = 'Bearer ' + token;
return config;
}, function (error) {
return Promise.reject(error);
});
上述代码中，我们通过axios.interceptors.request.use添加了一个请求拦截器。它接收一个函数作为参数，该函数会在请求发送之前被调用。
在该函数中，我们可以对请求的config进行修改，然后将其返回。这样，我们就可以在发送请求之前修改请求的配置。在这个例子中，我们向请求的headers中添加了一个Authorization字段，其值为我们的token。
需要注意的是，我们需要将修改后的config返回，否则请求将不会被发送出去。
多个拦截器
有时候，我们可能需要添加多个拦截器，每个拦截器负责处理不同的逻辑。我们可以通过链式调用axios.interceptors.request.use和axios.interceptors.response.use来实现。
axios.interceptors.request.use(function (config) {
// 第一个拦截器的逻辑
return config;
}, function (error) {
return Promise.reject(error);
});
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.response.use(function (response) {
// 第二个拦截器的逻辑
return response;
}, function (error) {
return Promise.reject(error);
});
在上述代码中，我们添加了两个响应拦截器。第一个拦截器的逻辑会在第二个拦截器之前执行。
需要注意的是，拦截器的执行顺序是按照添加的顺序执行的。
一次执行多个拦截器
在某些情况下，我们可能希望一次执行多个拦截器的逻辑。例如，我们可能希望在每个请求之后都进行一些公共的处理，而不是在每个拦截器中都写一遍相同的逻辑。
为了实现这个功能，我们可以使用axios.interceptors.request.eject和axios.interceptors.response.eject来移除拦截器。
const interceptor1 = axios.interceptors.request.use(function (config) {
// 第一个拦截
