封装axios拦截器与请求头添加参数的实用指南

2023-01-16 16:51:19

在 axios 中封装拦截器并向请求头添加参数的终极指南

作为开发者，我们经常需要向服务器发送 HTTP 请求来检索或更新数据。在这方面，axios 是一款备受推崇的 JavaScript 库，它以其简单而强大的 API 而闻名，使我们可以轻松地发出请求。

为了增强对请求的控制并改善其处理方式，我们可以利用 axios 的拦截器功能。拦截器允许我们在请求发出前和收到响应后执行特定操作，例如添加请求头、处理响应结果等等。

封装 axios 拦截器

封装 axios 拦截器可以帮助我们有效地管理请求和响应。以下是如何实现这一目标的分步指南：

创建新的 axios 实例：

const axiosInstance = axios.create({
  // 配置项
});

添加请求拦截器：

axiosInstance.interceptors.request.use((config) => {
  // 请求拦截器逻辑
  return config;
}, (error) => {
  // 请求拦截器错误处理
  return Promise.reject(error);
});

添加响应拦截器：

axiosInstance.interceptors.response.use((response) => {
  // 响应拦截器逻辑
  return response;
}, (error) => {
  // 响应拦截器错误处理
  return Promise.reject(error);
});

在请求头中添加参数

发送请求时，我们可以通过请求头传递附加信息，例如认证凭据、语言偏好或内容类型。以下是通过 axios 在请求头中添加参数的三种方法：

直接在 axios 请求中添加请求头：

axios({
  url: 'https://example.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

通过 axios 实例的默认请求头添加请求头：

const axiosInstance = axios.create({
  headers: {
    'Content-Type': 'application/json'
  }
});

axiosInstance.get('https://example.com');

通过 axios 拦截器添加请求头：

axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.get('https://example.com');

常见问题解答

1. 我应该在什么时候使用请求拦截器？