Appearance
axios取消请求
使用 CancelToken (较旧方式,仍可用)
这是 Axios 早期版本提供的取消请求方法:
js
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 发起请求
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('请求被取消', thrown.message);
} else {
// 处理其他错误
}
});
// 取消请求
source.cancel('操作被用户取消');
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 发起请求
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('请求被取消', thrown.message);
} else {
// 处理其他错误
}
});
// 取消请求
source.cancel('操作被用户取消');
使用 AbortController (推荐方式)
js
const axios = require('axios');
// 创建 AbortController 实例
const controller = new AbortController();
// 发起请求
axios.get('/user/12345', {
signal: controller.signal
}).catch(function(error) {
if (axios.isCancel(error)) {
console.log('请求被取消');
} else {
// 处理其他错误
}
});
// 取消请求
controller.abort();
const axios = require('axios');
// 创建 AbortController 实例
const controller = new AbortController();
// 发起请求
axios.get('/user/12345', {
signal: controller.signal
}).catch(function(error) {
if (axios.isCancel(error)) {
console.log('请求被取消');
} else {
// 处理其他错误
}
});
// 取消请求
controller.abort();
两种方式的区别
- CancelToken:
- Axios 特有的实现
- 需要额外引入 CancelToken
- 在较旧项目中常见
- AbortController:
- 基于 Web 标准 API
- 更现代、更推荐的方式
- 与 Fetch API 的取消机制一致
- Node.js 从 v15.0.0 开始支持
实际应用场景
- 用户在输入框中快速输入时取消之前的搜索请求
- 离开页面时取消未完成的请求
- 防止重复提交表单时取消之前的请求
建议在新项目中使用 AbortController,因为它更符合现代 Web 标准。