如何取消所有其他Ajax请求？SPA场景下的请求中止问题

你现在的问题在于每次发起请求时都新建了独立的XMLHttpRequest实例，但没有对这些实例进行统一管理——你只能拿到当前新创建的请求B，根本找不到之前的请求A，自然没法中止它。

核心解决方案：统一管理所有未完成的请求实例 #

我们可以维护一个全局数组来存储所有正在进行的请求，每次发起新请求前，先遍历数组中止所有未完成的请求，再将新请求加入数组；请求完成（无论成功、失败还是被中止）后，再从数组中移除该实例，避免内存泄漏。

修正后的完整代码 #

先纠正你源码里的几个小错误：变量名拼写错误requeset→request，open方法里的URL字符串格式错误（引号不匹配、语法错误），再加入请求管理逻辑：

// 全局维护未完成的请求集合
const pendingRequests = [];

function link(to) {
    // 先中止所有未完成的旧请求
    pendingRequests.forEach(req => {
        req.abort();
    });
    // 清空已中止的请求集合
    pendingRequests.length = 0;

    // 创建新请求
    const request = new XMLHttpRequest();
    // 修正URL格式，可根据实际需求调整
    request.open('GET', `/api${window.location.pathname}`, true);
    
    // 将新请求加入集合
    pendingRequests.push(request);

    request.send();

    request.onload = function() {
        console.log('hello!');
        // 请求完成后从集合移除
        const index = pendingRequests.indexOf(request);
        if (index !== -1) {
            pendingRequests.splice(index, 1);
        }
    };

    // 处理请求中止的情况，从集合移除
    request.onabort = function() {
        const index = pendingRequests.indexOf(request);
        if (index !== -1) {
            pendingRequests.splice(index, 1);
        }
    };

    // 处理请求失败的情况，从集合移除
    request.onerror = function() {
        const index = pendingRequests.indexOf(request);
        if (index !== -1) {
            pendingRequests.splice(index, 1);
        }
    };
}

关键逻辑说明 #

• 全局请求集合：pendingRequests数组用来追踪所有还在进行中的请求，确保我们能找到所有需要中止的旧请求。
• 新请求发起前的清理：每次调用link时先遍历数组中止所有旧请求，再清空数组，确保不会有残留的未处理请求。
• 请求完成后的清理：无论是请求成功完成、被中止还是失败，都要把当前请求实例从集合中移除，防止数组无限增长导致内存泄漏。

这样每次你误点链接发起新请求时，之前所有未完成的请求都会被立刻中止，解决你的问题。

内容的提问来源于stack exchange，提问作者NaweGa