如何取消上一次的请求
在前端开发中，我们经常会遇到需要发送异步请求的情况。而在某些场景下，我们可能会需要取消之前已经发送的请求，例如在用户频繁切换页面或者输入框搜索时，需要取消上一次的请求，以避免不必要的网络请求和处理。
本文将通过介绍 axios 如何取消上一次的请求，并给出一个实际问题的解决方案。
什么是 axios？
axios 是一个基于 Promise 的 HTTP 客户端，用于发送请求和处理响应。它可以在浏览器和 Node.js 中使用，支持拦截请求和响应，提供便捷的 API。
如何使用 axios 发送请求和取消请求？
首先，我们需要安装 axios，可以通过 npm 或者 yarn 安装：
npm install axios
然后，在需要使用的地方引入 axios:
import axios from 'axios';
接下来，我们来看一下如何发送请求和取消请求。
发送请求
通过 axios 发送请求非常简单，只需要调用对应的方法即可。以下是一个发送 GET 请求的示例：
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
在上面的例子中，我们通过 axios 发送了一个 GET 请求，请求的 URL 是 /api/data。然后，我们通过 then 方法来处理请求成功的响应，并通过 catch 方法来处理请求失败的情况。
取消请求
要取消上一次的请求，我们需要使用 axios 提供的 CancelToken。CancelToken 是一个工厂函数，用于创建一个取消令牌。
首先，我们需要创建一个 CancelToken 实例，并将它作为请求的配置参数之一。然后，我们可以调用 CancelToken 实例的 cancel 方法来取消请求。以下是一个取消请求的示例：
import axios from 'axios';
// 创建 CancelToken 实例
const CancelToken = axios.CancelToken;
let cancel;
// 发送请求
axios.get('/api/data', {
cancelToken: new CancelToken(function executor(c) {
// 保存取消函数
cancel = c;
})
})
.then(response => {
console.log(response.data);
})
.catch(error => {
// 如果请求被取消，会进入这里
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.error(error);
}
});
// 取消请求
cancel('Operation canceled by the user.');
在上面的例子中，我们通过传递一个 executor 函数给 CancelToken 来创建一个取消令牌。在 executor 函数中，我们可以通过参数 c 来调用取消函数 cancel。
如果在请求发送之前调用了 cancel 函数，那么请求就会被取消。当请求被取消时，catch 方法中的回调函数会接收一个 Cancel 类型的异常对象。
示例：取消上一次的请求
现在，我们来看一个实际问题的例子：用户在输入框中搜索关键字时，我们需要根据关键字发送请求来获取搜索结果。由于用户可能频繁输入和删除关键字，我们需要取消之前的请求，只发送最新的请求。
首先，我们需要创建一个输入框和一个搜索函数，代码如下：
<input type="text" id="search" />
<button id="search-btn">Search</button>
import axios from 'axios';
// 保存取消函数
let cancel;
// 搜索函数
function search() {
// 取消上一次的请求
if (typeof cancel === 'function') {
cancel('Operation canceled by the user.');
}
// 保存取消函数
const CancelToken = axios.CancelToken;
cancel = CancelToken.source().cancel;
// 获取输入框的值
const keyword = document.getElementById('search').value;
// 发送请求
axios.get('/api/search', {
params: {
keyword
},
cancelToken: new CancelToken(function executor(c) {
// 保存取消函数
cancel = c;
})
})
.then(response => {
console.log(response.data);
})
.catch(error => {
// 如果请求被取消，会进入这里
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.error
