取消请求：axios.

2025/5/11 5:08:56 来源：https://blog.csdn.net/qq_37766810/article/details/146039083 浏览: 次关键词：取消请求：axios.

axios.CancelToken和isCancel

1. cancelToken的作用是获取取消函数，用来手动取消接口。
1. axios.isCancel的作用是在处理错误的时候判断当前错误，是否是由于取消导致的。

使用方式1

  const testFun = async () => {let cancel: any; // 保存取消函数// 发送请求，配置 cancelTokenaxios.get('/api/authorization/initData1', {cancelToken: new axios.CancelToken(function executor(c) {cancel = c; // 将取消函数赋值给外部变量}),}).catch((err) => {if (axios.isCancel(err)) {console.log('请求已取消！', err);} else {console.log('其他错误!', err);}});// 取消请求cancel('请求被终止11');};

如下图，这个接口就被cancel了
在这里插入图片描述

使用方式2

const axios = require('axios');// 创建 CancelToken 的 source 对象
const source = axios.CancelToken.source();// 发送请求，配置 cancelToken
axios.get('/api/data', {cancelToken: source.token
}).then(response => console.log(response)).catch(error => {if (axios.isCancel(error)) {console.log('请求已取消:', error.message);} else {// 处理其他错误}});// 取消请求（可传入提示信息）
source.cancel('用户取消了请求');

AbortController

浏览器的原生api。所有的请求库都能使用这个方法。所有浏览器都支持。

1. AbortController 的实例用来绑定到anxios的signal 上。
1. controller.abort触发请求。
1. error.name === ‘CanceledError’。检查是否取消类型的错误

  const testFun1 = async () => {const controller = new AbortController();axios.get('/api/authorization/initData', {signal: controller.signal, // 绑定 AbortSignal}).then((response) => console.log(response)).catch((error) => {if (error.name === 'CanceledError') {// 检查是否取消console.log('请求已取消！', error);} else {console.error('其他错误:', error);}});// 触发取消controller.abort('这是一次手动取消');};