Axios 取消请求 - Javascript

在使用 Axios 进行网络请求时，有时我们需要在请求进行时取消请求，以免造成不必要的消耗。这篇文章主要介绍如何在 Javascript 中使用 Axios 取消请求。

环境

• Axios：0.21.1
• Node.js：v14.16.1

使用 CancelToken

Axios 提供了 CancelToken 来实现取消请求，简单来说就是调用 cancel() 方法取消请求。需要注意的是，若请求已经发送，就会走 catch 方法，可以根据实际情况处理异常。

以下是一个基本的示例代码：

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('/your/url', { cancelToken: source.token })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    if (axios.isCancel(err)) {
      console.log('Request canceled: ', err.message);
    } else {
      console.log('Request error: ', err);
    }
  });

source.cancel('User canceled the request.');

首先，我们使用 CancelToken.source() 创建一个取消令牌实例，然后将 cancelToken 属性添加到请求中。接着我们可以像平常一样发送请求。需要注意的是，在 catch 方法中，我们需要判断取消请求的异常，以免把这种异常当成其它异常处理。最后我们调用 cancel() 方法取消请求，它的参数是可选的，可以传递一个字符串作为取消原因。

使用 axios.CancelToken

如果 source 变量只会被使用一次，也可以直接使用 axios.CancelToken 来创建取消令牌对象。

axios.get('/your/url', {
  cancelToken: new axios.CancelToken((cancel) => {
    // 执行取消操作，并传入一个取消原因
    cancel('User canceled the request.');
  }),
})

如何取消请求？

source.cancel() 方法和 axios.CancelToken 实例的 cancel() 方法都可以用来取消请求。它们的区别在于，axios.CancelToken 创建的实例可以用来同时取消多个请求，而 source 变量只能取消一个请求。

取消多个请求

通过上面的示例，我们可以知道如何取消单个请求，接下来我们介绍如何取消多个请求。

我们可以给每个请求都传递同一个取消令牌实例，这样当取消令牌实例调用 cancel() 方法时，所有使用该实例的请求都会被同时取消。示例代码如下：

import axios from 'axios';

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

const request1 = axios.get('/url1', { cancelToken: source.token });
const request2 = axios.get('/url2', { cancelToken: source.token });

Promise.all([request1, request2])
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    if (axios.isCancel(err)) {
      console.log('Request canceled: ', err.message);
    } else {
      console.log('Request error: ', err);
    }
  });

source.cancel('User canceled the requests.');

总结

通过本文介绍，我们知道了如何使用 Axios 取消请求。在实际开发中，取消请求可以加快页面加载速度，提高用户体验。需要注意的是，尽量避免在请求发送后再取消请求，以免造成网络资源的浪费。