使用 AbortController 中止后如何重新启动 fetch api 请求

Question

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

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

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

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

AbortController 中止异步获取请求，一旦我中止获取请求，它就不会再次启动，而是给出错误 告诉操作中止（未捕获（承诺中）DOMException：操作已中止）。

长话短说，我如何使用 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();
  }

Answer 1

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);