axios请求拦截设置
在前端开发中，使用axios作为HTTP请求库是非常常见的。axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它提供了灵活的API，使得发送HTTP请求变得非常简单和方便。而请求拦截器是axios中非常重要的一个功能，它允许我们在发送请求之前对请求进行修改或者添加一些全局的配置。
什么是请求拦截器
请求拦截器是一个钩子函数，它会在发送请求之前被调用。我们可以利用请求拦截器来修改请求的配置或者添加一些全局的配置，比如添加认证信息、修改请求头等。请求拦截器是一个非常强大的工具，它可以帮助我们简化代码并提高开发效率。
如何使用请求拦截器
使用axios发送请求非常简单，只需要调用axios的相应方法即可。而要设置请求拦截器，我们需要使用axios的interceptors属性来访问拦截器。interceptors是一个对象，包含了request和response两个属性，分别对应请求拦截器和响应拦截器。
请求拦截器示例
下面是一个简单的示例，展示了如何使用请求拦截器在每个请求中添加一个认证头。
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: '
timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use(config => {
// 在请求发送之前做一些处理
config.headers['Authorization'] = 'Bearer ' + getToken();
return config;
}, error => {
// 错误处理
return Promise.reject(error);
});
// 发送请求
instance.get('/user')
.then(response => {
// 请求成功处理
console.log(response.data);
})
.catch(error => {
// 请求失败处理
console.error(error);
});
在上面的代码中，我们首先使用axios.create方法创建了一个axios实例，并指定了请求的基本配置。然后，我们使用instance.interceptors.request.use方法来添加请求拦截器。在请求拦截器中，我们可以修改请求的配置对象config，并且需要返回修改后的配置对象。在这个示例中，我们在请求头中添加了一个认证头，通过getToken方法获取token，并将其添加到Authorization头中。
请求拦截器的执行顺序
当我们发送一个请求时，请求拦截器会按照添加的顺序依次执行。每个拦截器接收一个配置对象，并且可以返回一个新的配置对象，也可以返回一个Promise来进行异步操作。如果拦截器返回了一个配置对象，那么它会替换原来的配置对象，并继续发送请求。如果拦截器返回了一个Promise，那么它会在Promise解析后继续发送请求。
序列图
下面是一个使用请求拦截器的示例序列图：
sequenceDiagram
participant App
participant axios
participant API
App->>axios: 发送请求
axios->>API: 发送请求
API->>axios: 返回响应
axios->>App: 返回响应
在序列图中，我们可以看到当我们的应用发送一个请求时，axios会调用请求拦截器进行处理，然后发送请求到API。API处理请求后返回响应，axios再将响应返回给我们的应用。
总结
通过请求拦截器，我们可以在发送请求之前对请求进行修改或者添加一些全局的配置，从而提高开发效率和代码的可维护性。使用axios的请求拦截器非常简单，只需要使用interceptors属性来访问拦截器并添加相应的处理函数即可。希望本文对你理解axios的请求拦截器有所帮助，能够更好地应用到实际的项目中。
