Axios 中如何取消请求：从不会使用到精通原理

在 Axios 中，取消请求主要依赖于 CancelToken 对象。CancelToken 是 Axios 提供的一种用于取消请求的机制。通过创建一个 CancelToken 实例，你可以获得一个取消令牌（cancel token），然后将该令牌传递给请求。如果需要取消请求，只需调用该令牌的 cancel() 方法即可。
以下是使用 Axios 取消请求的基本步骤：

1. 安装 Axios：首先，确保你的项目中已经安装了 Axios。如果尚未安装，可以通过以下命令进行安装：

   npm install axios

2. 创建 CancelToken：Axios 提供了 CancelToken 类的静态方法 source()，用于创建新的 CancelToken 实例。可以通过调用 source() 方法来创建取消令牌：

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

3. 传递取消令牌：将创建的取消令牌作为请求选项中的 cancelToken 参数传递给 Axios 请求方法（如 get、post 等）。这样，当调用该请求时，Axios 将自动使用该令牌进行取消操作：

   axios.get('https://api.example.com/data', {
   cancelToken: source.token
   })

4. 取消请求：在需要取消请求时，调用取消令牌的 cancel() 方法。这将导致请求被取消，并且返回一个 Promise 对象，该对象被拒绝并携带一个 Cancel 类型的错误：

   source.cancel('Request cancelled due to new requirements');

5. 处理取消请求：当请求被取消时，可以在 Promise 的 catch 块中处理错误。可以使用 Axios 的 isCancel() 方法来检查错误是否由取消请求引起：

   axios.get('https://api.example.com/data', {
   cancelToken: source.token
   })
   .catch(function (error) {
   if (axios.isCancel(error)) {
   console.log('Request cancelled', error.message);
   } else {
   // Handle other errors
   }
   });

   需要注意的是，Axios 的取消请求机制是有限的，主要用于单个请求的取消。如果你需要取消多个请求，可以将所有需要取消的请求的取消令牌存储在一个数组中，然后在需要取消所有请求时循环该数组并调用每个令牌的 cancel() 方法。这样就可以同时取消多个请求。例如：

   const requests = [/* array of axios requests */];
   const tokens = requests.map(req => source.token); // get cancel tokens for each request
   // ... later, when you want to cancel all requests:
   for (const token of tokens) {
   token.cancel('Cancelling all requests');
   }

   总结：Axios 提供了一种方便的取消请求机制，通过创建 CancelToken 实例并传递给请求选项，可以轻松地取消单个或多个请求。使用 Axios 的 isCancel() 方法可以检查错误是否由取消请求引起，以便在处理错误时进行适当的处理。希望本文能帮助你更好地理解和使用 Axios 中的取消请求功能。