停止网页等待取消的 XHR 请求

编程问答 2022-05-03

问题描述

我正在处理一个 Django 项目，我的一个页面的 Javascript 发出了一些 XHR 请求，可能需要一段时间才能完成。如果用户转到此页面，他们必须等待这些请求完成，然后站点才会让他们转到另一个页面。

我一直在尝试让页面在点击另一个页面时取消这些请求，但即使请求取消页面在更改 URL 之前仍然需要等待一段时间。这就是我的请求的结构。

const controller = new AbortController()
const signal = controller.signal

let get_salesperson_sales = async() => {
    return await fetch(`/reports/salesperson-sales/${fromDate && toDate ? `from_date=${fromDate}&to_date=${toDate}` : ''}`,{ signal })
    .then(response => response.json())
    .then(response => {
        document.getElementById('total_rep_sales').innerText = '$'+Number(response.total_sales.toFixed(2)).toLocaleString()
        return response
    })
    .catch(error => {
        if (error.name === 'AbortError') console.log('Salesperson sales fetch was aborted.')
        else errorMessage.innerHTML += '<p>Error getting sales by rep: '+error.responseJSON ? error.responseJSON.details : 'Unexpected error'+'</p>'
    })
}

我用 Promise.allSettled() 调用了这些函数中的 4 个。在页面底部，我绑定了几个函数来中止请求。

$('#date-filter').submit(() => {
    // Stop loading current report before submitting
    controller.abort()
    return true
})
$(window).bind('beforeunload',() => {
    controller.abort()
})

请求取消成功，我可以在浏览器的“网络”选项卡中看到，因为我的控制台日志显示在控制台中，但由于某种原因，页面在请求取消后继续等待。

真正让我失望的部分是，虽然这发生在我的生产版本中，但当我在本地主机上运行项目时，页面似乎在取消请求后立即更改。两个版本中 Web 应用程序的唯一主要配置差异是 Django 的 DEBUG 在本地版本中为 True，在生产版本中为 False。我尝试了 4 种不同的取消请求方法和 2 种不同类型的请求（$.ajax 和 fetch），每次都成功取消请求并遇到此问题。

可能导致此问题的原因是什么？如何强制我的页面立即更改而不是像这样等待？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxfetchfetchfetchjavascriptxmlhttprequestxmlhttprequest