js主动请求中断

莹宝思密达

已于 2023-07-25 15:16:13 修改

阅读量617

点赞数

分类专栏： react.js 文章标签： jquery javascript fetch

于 2023-04-24 19:01:45 首次发布

本文链接：https://blog.csdn.net/miin_ying/article/details/130349561

版权

react.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讲述了在应用中遇到的用户快速切换Tab时，由于数据返回时间不确定导致的数据混乱问题。为了解决这个问题，文中提出了两种解决方案：一是使用jQuery的Ajax方法，通过判断并取消未返回的接口请求，确保使用最新的数据；二是结合React和fetch，利用AbortController来取消所有之前的未完成请求，保证数据的正确性。

摘要由CSDN通过智能技术生成

应用场景：快速切换tab，数据混乱

原因：快速切换时，数据返回时间不能把控。可能之前的请求比之后的请求返回慢，造成数据错误。

处理：多次切换，取消未返回的接口。直接使用最后一次接口返回的数据。

1、jquery代码-取消指定未返回的接口

            var _this = this
            if (_this.GetMeasdTriggerListXhr != null) {
                _this.GetMeasdTriggerListXhr.abort();
            }
            _this.GetMeasdTriggerListXhr = $.ajax({
                type: "Post",
                url: "/xxx",
                data: options,

            });

2、react+fetch-取消当前操作之前所有的未返回的接口

window.controller = new AbortController();
window.signal = window.controller.signal;
  if (window ?.controller ?.signal ?.aborted) {
    window.controller = new AbortController();
    window.signal = window.controller.signal;
  }

headers = {
      Authorization: loginInfo && loginInfo.token ? loginInfo.token : null,  
};

return fetch(url, headers )