axios 终止还未加载的请求
在前端开发中，我们经常会使用 axios 这个库来发送 HTTP 请求。axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它的特点是易用、灵活和强大。
在实际项目开发中，我们经常会遇到这样的场景：当用户频繁触发某个操作时，可能会导致连续发送多个请求。但是，在某些情况下，我们希望终止之前没有完成的请求，以节省系统资源和提高用户体验。
本文将会介绍如何在使用 axios 发送请求时，终止还未加载完成的请求。我们将会通过一些代码示例来说明。
概述
在开始之前，我们先来了解一下 axios 的基本用法。
import axios from 'axios';
axios.get('/api/user')
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
如上所示，我们通过 axios.get 方法发送一个 GET 请求，然后通过 .then 方法处理返回的数据，通过 .catch 方法处理请求过程中的错误。
终止请求的需求
在某些情况下，我们希望用户在触发某个操作后，如果之前的请求还没有完成，就终止之前的请求。比如，在一个自动完成的输入框中，用户频繁输入会导致连续发送多个请求，我们希望只使用最后一次输入的请求结果，而忽略之前的请求结果。
解决方案
要实现终止请求的功能，我们需要使用 axios 的 CancelToken。CancelToken 是 axios 提供的一个工具，用于创建一个可用于取消请求的令牌。
代码示例
下面是一个实现终止请求的示例代码：
import axios from 'axios';
// 创建一个 CancelToken.source 对象
const source = axios.CancelToken.source();
// 发送请求
axios.get('/api/user', {
cancelToken: source.token
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
if (axios.isCancel(error)) {
console.log('请求被取消');
} else {
console.error(error);
}
});
// 取消请求
source.cancel('取消请求');
如上所示，我们首先创建一个 CancelToken.source 对象，然后将其作为 cancelToken 参数传递给 axios.get 方法。当我们调用 source.cancel 方法时，就可以取消之前的请求。
流程图
下面是一个使用 mermaid 语法绘制的流程图，来说明终止请求的过程：
flowchart TD
A(创建 CancelToken.source 对象) --> B(发送请求)
B --> C{请求是否完成？}
C -- 是 --> D(处理响应结果)
C -- 否 --> E{请求是否被取消？}
E -- 是 --> F(输出"请求被取消")
E -- 否 --> G(处理请求错误)
如上所示，我们首先创建一个 CancelToken.source 对象，然后发送请求。在请求完成时，我们处理响应结果；如果请求被取消，我们输出"请求被取消"；如果请求出现错误，我们处理请求错误。
旅行图
下面是一个使用 mermaid 语法绘制的旅行图，来说明终止请求的过程：
journey
title 终止请求的过程
section 发送请求
发送 GET 请求到 /api/user
section 取消请求
取消请求
section 输出结果
输出请求结果或"请求被取消"
如上所示，我们首先发送一个 GET 请求到 /api/user，然后取消请求，最后输出请求结果或"请求被取消"。
总结
在本文中，我们介绍了如何使用 axios 终止还未加载的请求。通过使用 CancelToken，我们可以在发送请求的过程中，取消之前的请求，从而提高用户体验和节省系统资源。
希望本文能对你理解和使用 axios 有所帮助。如果你对 axios 还有其他疑问，可以查看官方文档或在社区中进行讨论。
