当前位置：首页 > article >正文

取消请求：axios.

article 2025/3/6 6:13:46

axios.CancelToken和isCancel

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

使用方式1

  const testFun = async () => {
    let cancel: any; // 保存取消函数
    // 发送请求，配置 cancelToken
    axios
      .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('这是一次手动取消');
  };