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

Question

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

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

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

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

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

长话短说，我如何使用 AbortController 再次重新启动获取 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);

Answer 2

我在 React 中解决了这个问题，如下所示：

import React, { useState, useEffect } from 'react';
import './style.css';
import axios from 'axios';
let abortController = new AbortController();
export default function App() {
 const [isCancel, setIsCancel] = useState(false);

 useEffect(() => {
 isCancel && abortController.abort();
 }, [isCancel]);

const onStart = () => {
 try {
  setIsCancel(false);
   abortController = new AbortController();
   axios
    .get('https://api.github.com/users', { signal: abortController.signal })
    .then((res) => console.log(res.status))
    .catch((err) => console.log(err));
} catch (er) {
  console.log(er);
}
};

return (
<div>
  <button onClick={onStart}>Start</button>
  <button onClick={() => setIsCancel(true)}>Cancel</button>
</div>
);
 }