axios请求取消原理大揭秘！告别超时焦虑，还你网络请求新体验！

2024-01-16 17:10:36

axios请求取消：化解网络请求难题

前言

作为前端开发人员，网络请求是我们必备的技能。然而，面对不断涌现的请求取消难题，我们如何优雅地化险为夷？本文将深入剖析axios请求取消的原理，助你掌握这一关键技术，提升网络请求的掌控力。

AbortController和CancelToken：请求取消的基石

axios请求取消的核心组件是AbortController 和CancelToken 。其中，AbortController是浏览器原生提供的接口，用来控制请求的终止。而CancelToken则是axios提供的高层封装，简化了AbortController的使用。

请求取消的原理

当我们使用axios发起请求时，axios会自动创建一个AbortController并将其绑定到该请求。当我们调用CancelToken的cancel()方法时，AbortController的abort()方法也会被调用，从而终止请求。

使用axios取消请求的两种方式

1. 使用cancelToken选项：

这种方式更加简单，只需在axios请求配置对象中添加cancelToken选项即可。

代码示例：

const axiosInstance = axios.create({
  baseURL: 'https://example.com',
  timeout: 10000,
});

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

axiosInstance.get('/api/users', {
  cancelToken: source.token,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.log('Request failed');
  }
});

// 取消请求
source.cancel('Request canceled');

2. 直接使用AbortController：

这种方式更加灵活，我们可以对AbortController进行更多控制，比如设置超时时间等。

代码示例：

const controller = new AbortController();
const signal = controller.signal;

axiosInstance.get('/api/users', {
  signal: signal,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.log('Request failed');
  }
});

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