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

Question

我正在开发一个外卖订单接收应用程序（使用 WooCommerce API），订单将立即收到。我创建了一个简单的仪表板，其中显示所有订单，并使用 fetch API 和setInterval.

因此，当用户单击他们在仪表板上收到的订单时。用户管理订单的位置会出现模型弹出窗口。但由于 setInterval（5 秒），模型消失了。为了解决这个问题，我使用该技术来清除间隔，以便当用户单击订单间隔时被清除，并且不会进一步请求，直到用户管理模型框中的订单并按保存按钮，保存时我再次调用函数setInterval。

但在这种技术中，存在一个问题：如果setInterval要执行并且用户单击订单，并且由于 fetch 已被触发并且所有订单都已刷新，则模型会消失。所以我必须再次点击订单。

然后我使用AbortControllerAPI​​，它完全按照我想要的方式工作。

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

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