axios的AbortController取消请求

91 阅读1分钟

场景:我的项目在切换表格分页时,后端某个接口相应时间长,七八秒,这时候用户可以点击某个按钮取消请求,或者点一下换下一个请求。不然界面一直在loading中。。。

const axios = require('axios');
const { AbortController } = require('abort-controller'); // Node.js 中需要单独安装

**// 创建一个 AbortController 实例
const controller = new AbortController(); **

// 发起 Axios 请求,并将 controller.signal 作为 signal 属性传递给配置对象
axios({
method: 'get',
url: '/user/12345', // 替换为你的请求 URL
signal: controller.signal // 添加 AbortSignal 对象以支持取消
}).then(function (response) {
// 请求成功时的处理逻辑
console.log(response.data);
}).catch(function (error) {
// 请求失败或取消时的处理逻辑
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
}
else {
// 处理其他错误
console.error('Error:', error);
}
});

// 在某个时间点,如果你想要取消请求
// 调用 controller.abort() 并传递一个可选的原因字符串
controller.abort('Request was canceled by the user.');