fetch中断请求, 和再次恢复使用

业务场景:当时用fetch()建立长连接请求,在不使用时需要将其断掉,以缓解带宽压力和浏览器运行压力。等再次需要建立长链接时,再次启用。

1、外层定义controller;一旦中止,AbortController就会被消耗。每次调用都必须创建新的实例。
2、方法体内定义具体实现
const signal = controller.signal;
controller = new AbortController();
3、终端调用 controller.abort();

  // 判断某条件,如果不等于空, 先将fetch请求中断, 再在window上new AbortController()

这里为啥要用window呢?  因为我将中断操作,和建立链接操作放在了一个函数内.

  srtGet() {
      if (this.value != "") {
        window.controller.abort();
        console.log("signal 的中止状态: ", signal);
      }
      window.controller = new AbortController();
      let signal = window.controller.signal;
      console.log("signal 的初始状态: ", signal);
     
      fetch("/api/config/interface", {
        signal,
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((r) => )
        .then(f);
    },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值