Axios 随手拈来：请求与响应拦截器

2022-12-08 22:52:25

Axios拦截器指南：掌控HTTP请求与响应

一、拦截器原理与实现

Axios拦截器就像一个HTTP请求和响应之间的过滤器，允许你在请求发出和响应返回之前对其进行处理。拦截器原理很简单，它注册了一个函数，当HTTP请求或响应发生时，这个函数就会被调用。这些函数可以执行各种各样的操作，从添加请求头到修改响应数据。

二、拦截器的妙用：请求/响应拦截场景

拦截器的应用非常广泛，以下是几个常见的场景：

请求头注入： 在每个请求中添加自定义请求头，如身份验证令牌或语言偏好。
请求数据修改： 加密或压缩请求数据。
响应数据处理： 解析JSON数据或转换数据格式。
请求取消： 当用户取消操作或请求超时时取消请求。

三、拦截器示例：代码教你如何使用

1. 安装Axios

npm install axios

2. 创建拦截器

axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  return config;
});

axios.interceptors.response.use((response) => {
  // 在收到响应之后做些什么
  return response;
});

四、活用拦截器：取消请求的N种姿势

拦截器不仅可以修改请求和响应，还可以取消请求。这在用户取消操作或请求超时时非常有用。

取消请求有两种方法：

方法一：使用abort()方法

const controller = axios.CancelToken.source();
const config = {
  cancelToken: controller.token,
};

axios.get('https://example.com', config).then((response) => {
  // 请求成功
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求被取消
  } else {
    // 其他错误
  }
});

// 取消请求
controller.cancel();

方法二：使用cancelToken.promise

const cancelToken = axios.CancelToken.source();
const config = {
  cancelToken: cancelToken.token,
};

axios.get('https://example.com', config).then((response) => {
  // 请求成功
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求被取消
  } else {
    // 其他错误
  }
});

// 取消请求
cancelToken.promise.then((cancel) => {
  cancel();
});