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

Question

我正在处理外卖应用程序(使用WooCommerce API)，订单将立即收到。我创建了一个简单的仪表板，显示所有订单，并使用带有setInterval的fetch API获取新订单。

所以当用户点击他们在仪表板上收到的订单时。将出现一个"模型"弹出窗口，用户可以在其中管理订单。但由于设置了间隔(持续5秒)，模型将消失。为了解决这个问题，我使用了清除间隔的技术，这样当用户点击订单间隔时，就会被清除，并且在用户在"模型"框上管理订单并按下保存按钮之前不会进一步请求，在保存时，我会再次调用setInterval函数。

但在这种技术中，存在一个问题：如果要执行setInterval，并且用户单击订单，并且由于fetch已经启动并且所有订单都已刷新，则模型将消失。所以我不得不再次点击订单。

所以我使用AbortControllerAPI，它完全按照我的要求工作。

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

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