返回

Axios 源码解析(五):核心工具方法(2) 的博客内容

前端

上篇 Axios 源码解析(四):核心工具方法(1) 解析了 default.js 和 /cancel 目录下的源码,下面继续解析 /cancel 目录下核心工具方法的代码。

取消请求

在 Axios 中,我们可以通过调用 cancelToken.cancel() 方法来取消请求。当请求被取消时,Axios 会自动抛出一个带有 error 属性的 Promise。我们可以通过在请求配置中指定 cancelToken 来使用取消请求功能。

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

axios({
  url: '/api/v1/users',
  cancelToken: source.token
}).then(response => {
  // 请求成功
}).catch(error => {
  if (axios.isCancel(error)) {
    // 请求被取消
  } else {
    // 其他错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

请求拦截器

请求拦截器允许我们在请求发送之前对请求进行修改。我们可以使用 axios.interceptors.request.use() 方法来注册请求拦截器。请求拦截器可以用来添加请求头、修改请求参数、取消请求等。

axios.interceptors.request.use(config => {
  // 在请求发送之前对请求进行修改
  return config;
}, error => {
  // 请求发送失败时执行
  return Promise.reject(error);
});

响应拦截器

响应拦截器允许我们在收到响应之后对响应进行修改。我们可以使用 axios.interceptors.response.use() 方法来注册响应拦截器。响应拦截器可以用来处理错误、提取数据、转换响应数据等。

axios.interceptors.response.use(response => {
  // 对响应进行修改
  return response;
}, error => {
  // 响应失败时执行
  return Promise.reject(error);
});

总结

通过对 Axios 源码的解析,我们可以更好地理解 Axios 的工作原理,并从中学习到有用的编程技巧。Axios 是一个非常优秀的 HTTP 库,它提供了许多实用的功能,可以帮助我们轻松地发送 HTTP 请求和处理响应。