使用 AbortController

问题描述

我正在处理外卖应用（使用 woocommerce API）的订单，订单将立即收到。我创建了一个简单的仪表板，其中显示所有订单并使用带 setinterval 的 fetch API 获取新订单。

所以当用户点击他们在仪表板上收到的订单时。模型弹出窗口出现在用户管理订单的地方。但是因为 setinterval(for 5s) 模型消失了，为了解决这个问题，我使用了清除间隔的技术，所以当用户点击清除的订单间隔并且不会进一步请求，直到用户在模型框上管理订单并按保存按钮，保存时我再次调用 setinterval 函数

但是在这种技术中，存在一个问题，如果要执行 setinterval 并且用户单击订单，并且因为 fetch 已经被触发并且所有订单都刷新了，模型就会消失。所以我必须再次点击订购（见图）https://postimg.cc/H8267CGd

所以我使用 AbortController Api，它完全按照我的意愿工作。

AbortController 中止异步获取请求，一旦我中止获取请求，它就不会再次启动，而不是给出错误 告诉操作中止（Uncaught (in promise) DOMException: The operation was aborted）。

长话短说，如何使用 AbortController 重新启动 fetch API 请求

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

function gettingOrders(){

var refreshInterval = setInterval(async function(){

const response = await fetch('index.PHP',{
    method: "GET",signal: signal,headers : { 
      'Content-Type': 'text/html','Accept': 'text/html'
   }});
   try {

    const html = await response.text();
    var parser = new DOMParser();
    var doc = parser.parseFromString(html,"text/html");
    var div = doc.getElementById('newOrder').innerHTML;
    document.getElementById('newOrder').innerHTML = div;
   }
   catch(err) {
    console.log('error: ',err);
  }
     
  },5000);
  }

  gettingOrders();

  var sinterval = refreshInterval;
  sessionStorage.setItem("sinterval",sinterval);

  function abortFetching() {
  console.log('Now aborting');
  controller.abort();
  }

解决方法

AbortController 一旦中止就会被消耗。您必须在每次调用时创建新实例。示例代码：

let controller;
let refreshInterval;

function getOrders(){
  refreshInterval = setInterval(async function() {
    controller = new AbortController();
    const signal = controller.signal;
    try {
      const response = await fetch('index.php',{
        method: "GET",signal: signal,headers : { 
          'Content-Type': 'text/html','Accept': 'text/html'
        }
      });
      const html = await response.text();
      var parser = new DOMParser();
      var doc = parser.parseFromString(html,"text/html");
      var div = doc.getElementById('newOrder').innerHTML;
      document.getElementById('newOrder').innerHTML = div;
    }
    catch(err) {
      console.log('error: ',err);
    }
  },5000);
}

function abortFetching() {
  console.log('Now aborting');
  clearInterval(refreshInterval); // else it aborts only current fetch
  controller.abort();
}

getOrders();

const sinterval = refreshInterval;
sessionStorage.setItem("sinterval",sinterval);