中止控制器不会取消所有待处理的请求

Question

在我的项目中，所有请求都通过单个获取函数。我将所有中止控制器存储在全局集内。当用户切换到另一个页面时，我将调用全局集并中止所有正在等待响应的获取请求。如果收到请求的响应，我会从集合中删除其控制器。

但问题是并非所有请求都被取消。当我尝试时，只有一小部分请求被取消。

获取请求-

 const controller = new AbortController();
            const request = { urlString, controller };
            requests.activeRequests.add(request);
            const signal = controller.signal;

            fetch(urlString, {
                headers: headers,
                method: method,
                signal: signal,
                body: payload ? JSON.stringify(payload) : undefined,
                credentials: 'include' 
            }).then(async (response) => {
                if (response.status === 200 || response.status === 204) {
                    requests.activeRequests.delete(request);

当用户切换到其他页面时执行此代码

requests.activeRequests.forEach((req)=>{
                req.controller.abort();
                requests.activeRequests.delete(req)
            })

有人可以帮助我理解为什么只有一些请求被取消，我做错了什么吗？

Answer 1

当客户端离开页面时，您的代码执行时存在问题。您应该在执行 abort() 之前检查是否收到响应。如果是这样，那么某些数据获取将不会中止。你处理错误的方式和你的循环需要稍微调整一下。

试试这个： // 创建要中止的请求列表和数组。

// 循环遍历活动请求并将其标记为中止

//删除后现在从activeReq中删除请求