利用axios拦截器实现请求的统一管理

前端

2023-12-11 15:33:06

前言

在前端开发中，我们经常需要与后端进行数据交互。而axios作为一款优秀的第三方网络请求库，受到了广大开发者的喜爱。axios提供了简洁的API、丰富的功能和强大的扩展性，可以帮助我们轻松地发起和处理HTTP请求。

使用axios拦截器实现请求的统一管理

1. 什么是axios拦截器？

axios拦截器是一种机制，允许我们在请求发送或响应被接收之前对其进行拦截和处理。我们可以使用axios拦截器来做很多事情，比如：

添加或修改请求头
处理请求和响应中的数据
实现token的统一注入
统一处理请求错误

2. 如何使用axios拦截器？

使用axios拦截器非常简单。我们只需要在创建axios实例时，使用interceptors.request()和interceptors.response()方法来添加请求拦截器和响应拦截器。

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000
});

instance.interceptors.request.use((config) => {
  // 在请求发送之前对config进行处理
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

instance.interceptors.response.use((response) => {
  // 在响应被接收之后对response进行处理
  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

3. 如何利用axios拦截器实现token的统一注入？

在实际开发中，我们经常需要在请求头中携带token。如果我们每次请求都手动添加token，不仅麻烦，而且容易出错。我们可以使用axios拦截器来实现token的统一注入。

// 创建请求拦截器
instance.interceptors.request.use((config) => {
  // 如果请求头中没有token，则从localStorage中获取token并添加到请求头中
  if (!config.headers['Authorization']) {
    const token = localStorage.getItem('token');
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

这样，我们只需要在请求头中携带token，axios拦截器就会自动将token添加到请求头中。

4. 如何利用axios拦截器实现请求统一处理？

在实际开发中，我们经常需要对请求进行统一处理，比如：

对请求参数进行格式化
对请求结果进行格式化
处理请求错误

我们可以使用axios拦截器来实现请求统一处理。

// 创建请求拦截器
instance.interceptors.request.use((config) => {
  // 对请求参数进行格式化
  config.params = formatParams(config.params);

  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

// 创建响应拦截器
instance.interceptors.response.use((response) => {
  // 对请求结果进行格式化
  response.data = formatData(response.data);

  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});