axios如何取消请求老方法（CancelToken）、新方法（AbortController ）

weixin_43647250

已于 2025-01-15 10:48:42 修改

阅读量209

点赞数 2

文章标签： pdf

于 2024-11-25 18:47:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43647250/article/details/144035115

版权

老方法 CancelToken

import axios from 'axios';

// 创建两个 CancelToken 源
let source1 = axios.CancelToken.source();
let source2 = axios.CancelToken.source();

// 请求1
function fetchData1() {
    axios.get('https://api.example.com/data1', { cancelToken: source1.token })
        .then(response => {
            console.log('请求1成功:', response.data);
        })
        .catch(err => {
            if (axios.isCancel(err)) {
                console.log('请求1已取消');
            } else {
                console.error('请求1出错:', err);
            }
        });
}

// 请求2
function fetchData2() {
    axios.get('https://api.example.com/data2', { cancelToken: source2.token })
        .then(response => {
            console.log('请求2成功:', response.data);
        })
        .catch(err => {
            if (axios.isCancel(err)) {
                console.log('请求2已取消');
            } else {
                console.error('请求2出错:', err);
            }
        });
}

// 按钮1点击事件
document.getElementById('button1').addEventListener('click', () => {
    source1.cancel('请求1已取消'); // 取消请求1
    source1 = axios.CancelToken.source(); // 重置 CancelToken
});

// 按钮2点击事件
document.getElementById('button2').addEventListener('click', () => {
    source2.cancel('请求2已取消'); // 取消请求2
    source2 = axios.CancelToken.source(); // 重置 CancelToken
});

// 发起请求
fetchData1();
fetchData2();

新方法 AbortController

import axios from 'axios';

// 创建两个 AbortController 实例
let controller1 = new AbortController();
let controller2 = new AbortController();

// 请求1
function fetchData1() {
    axios.get('https://api.example.com/data1', { signal: controller1.signal })
        .then(response => {
            console.log('请求1成功:', response.data);
        })
        .catch(err => {
            if (axios.isCancel(err)) {
                console.log('请求1已取消');
            } else {
                console.error('请求1出错:', err);
            }
        });
}

// 请求2
function fetchData2() {
    axios.get('https://api.example.com/data2', { signal: controller2.signal })
        .then(response => {
            console.log('请求2成功:', response.data);
        })
        .catch(err => {
            if (axios.isCancel(err)) {
                console.log('请求2已取消');
            } else {
                console.error('请求2出错:', err);
            }
        });
}

// 按钮1点击事件
document.getElementById('button1').addEventListener('click', () => {
    controller1.abort(); // 取消请求1
    controller1 = new AbortController(); // 重置 AbortController
});

// 按钮2点击事件
document.getElementById('button2').addEventListener('click', () => {
    controller2.abort(); // 取消请求2
    controller2 = new AbortController(); // 重置 AbortController
});

// 发起请求
fetchData1();
fetchData2();