在当前的开发实践中，前端请求库axios被广泛应用于各类HTTP请求的发起。然而，重复请求或无用请求的产生对于用户体验和后端资源都是一种浪费。为了提高页面的响应性能和避免不必要的后端操作，取消这些请求变得尤为重要。本文将详细介绍如何使用axios取消重复无用的请求。
我们来看看axios如何实现取消操作的两种方法：
1. 使用axios.CancelToken.source()获取取消令牌和取消方法：
axios提供了一个CancelToken的静态属性，可以通过调用CancelToken.source()方法获取一个source对象。通过source生成的token可被添加到axios请求的配置中。一旦需要取消请求，调用source的cancel()方法，并传入一个可选的错误消息字符串。这个消息将作为参数传递给catch回调中的axios.isCancel()方法，以判断该请求是否被取消。
示例代码如下：
```javascript
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求
source.cancel('Operation canceled by the user.');
```
2. 使用axios.CancelToken构造函数创建取消函数：
另一种方式是利用axios.CancelToken构造函数创建一个取消函数。在请求配置中传递一个函数执行器，该执行器接收一个取消函数作为参数。在需要取消请求时，可以调用这个取消函数。
示例代码如下：
```javascript
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor函数接收一个取消函数作为参数
cancel = c;
})
});
// 取消请求
cancel();
```
在实际应用中，取消请求通常用于两种场景：一是当请求方式、请求路径和请求参数完全一致时，重复发送请求；二是在路由切换时取消前一个路由未完成的请求。
为了封装取消请求的逻辑，通常我们会在全局范围内维护一个请求的注册和取消机制。具体实现可以使用一个Map对象，存储每个请求的唯一标识以及对应的取消函数。当发起新请求时，将该请求信息存储到Map中；当需要取消请求时，根据请求的标识找到对应的取消函数并调用。
以下是一个简化的封装实现：
```javascript
const pending = new Map();
// 添加请求
function addPending(config) {
const url = [
config.method,
config.url,
qs.stringify(config.params),
qs.stringify(config.data)
].join('&');
config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
if (!pending.has(url)) {
pending.set(url, cancel);
}
});
}
// 移除请求
function removePending(config) {
const url = [
config.method,
config.url,
qs.stringify(config.params),
qs.stringify(config.data)
].join('&');
if (pending.has(url)) {
const cancel = pending.get(url);
cancel(url);
pending.delete(url);
}
}
```
在上述代码中，addPending方法用于添加新的请求到Map中，并为请求添加一个取消令牌。removePending方法则用于取消特定的请求，并从Map中移除相应的记录。需要注意的是，在catch回调中使用axios.isCancel()来区分异常情况是由于请求被取消，还是由于其他原因（如网络错误等），这一点非常重要。
总结来说，通过以上两种方式，我们可以有效地管理axios发起的HTTP请求，避免重复无用的请求影响前端性能和后端资源。这要求开发者在实际开发中，根据不同的业务场景选择合适的取消策略，并通过良好的封装来提高代码的可维护性和复用性。
- 1
- 2
前往页