Axios 拦截器可用来统一设置全局请求参数、添加默认的请求头、添加请求时间戳、处理每次请求带上 token 等。 特别地，通过拦截器设置全局请求参数可以简化代码、提升效率，并保持项目代码的一致性。以添加默认的请求头为例，当我们需要让每一个请求都携带一定的认证信息（如 Token）时，可以在请求发送前统一添加到请求头中，而不需要手动在每一个请求里单独设置。
一、创建与配置拦截器
创建 Axios 拦截器通常在项目的全局 Axios 配置文件中进行。在请求（request）拦截器中，你可以对发送的请求做一些预处理。
import axios from 'axios';
// 设置全局的请求参数
axios.interceptors.request.use(config => {
// 在这里设置默认参数
const defaultParams = { 'appId': 'yourAppID', 'appSecret': 'yourAppSecret' };
config.params = { ...defaultParams, ...config.params };
// 设置默认请求头（如：认证 Token）
config.headers['Authorization'] = 'Bearer yourToken';
// 其他全局性配置请求处理
// ...
return config;
}, error => {
// 请求错误处理
return Promise.reject(error);
});
二、添加默认请求头
在进一步设置请求头时，你可以根据项目需求添加任何默认的请求头。
// 继续在拦截器中处理
axios.interceptors.request.use(config => {
// 前置代码 ...
// 对请求头进行统一配置
config.headers['Content-Type'] = 'application/json'; // 设置内容类型
config.headers['Accept'] = 'application/json'; // 设置接受类型
// 如果存在token，每个http header都加上token
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 后置代码 ...
return config;
}, error => {
// 对请求错误处理
return Promise.reject(error);
});
三、添加请求时间戳
为了避免某些请求被缓存，一些开发者会给请求添加时间戳参数，通过这种方式来确保每次请求得到的是最新的数据。
axios.interceptors.request.use(config => {
// 前置代码 ...
// 添加时间戳，防止请求被缓存
config.params = config.params || {};
config.params.timestamp = new Date().getTime();
// 后置代码 ...
return config;
}, error => {
// 对请求错误进行处理
return Promise.reject(error);
});
四、携带 Token 进行身份校验
如果你的后端服务端需要对每个请求进行身份校验，你可能需要在请求拦截器里添加一个 token。
axios.interceptors.request.use(config => {
// 前置代码 ...
// 如果你的token在localStorage中，这是添加它的方法
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 后置代码 ...
return config;
}, error => {
// 对请求错误进行处理
return Promise.reject(error);
});
五、处理全局请求错误
除了处理请求前的配置，请求拦截器也可以用来处理全局的请求错误。
axios.interceptors.request.use(config => {
// 请求前配置处理
return config;
}, error => {
// 全局请求错误处理
console.error('Request fAIled: ', error);
// 可以进行错误上报等操作
return Promise.reject(error);
});
六、结论
通过以上步骤，我们可以灵活地配置 Axios 拦截器来设置全局请求参数。这使得我们的代码更加简洁并易于管理，同时也可以在一定程度上增强应用的安全性。在实际的项目中，根据不同的业务需求对 Axios 进行配置，可以极大地提高开发效率并保证接口的稳定性。
相关问答FAQs：
1. 如何在axios拦截器中设置全局请求参数？
在axios拦截器中可以通过axios.interceptors.request.use方法来设置全局请求参数。首先，创建一个拦截器并调用axios.interceptors.request.use方法，设置请求发送前的回调函数。在回调函数中，可以修改配置对象的headers属性来添加全局请求参数。这样，在每次发送请求时，都会自动带上全局请求参数。
2. 怎样在axios拦截器中添加多个全局请求参数？
要添加多个全局请求参数，可以在拦截器中的回调函数中使用Object.assign方法来合并多个参数。首先，定义一个对象，将全局请求参数添加到该对象中。然后，使用Object.assign方法将该对象与请求的配置对象合并，从而将多个全局请求参数一起发送。这样，每次发送请求时，都会自动携带多个全局请求参数。
3. 如何在axios拦截器中设置全局请求参数的默认值？
想要设置全局请求参数的默认值，可以在axios的实例中使用defaults属性。首先，在创建axios实例时，可以通过defaults属性设置默认的请求配置对象，包括全局请求参数。这样，每次发送请求时，axios会自动将默认的全局请求参数添加到请求中。另外，如果需要覆盖默认的全局请求参数，可以在单个请求中手动设置参数，优先级更高。这样，可以方便地设置全局请求参数的默认值。
