如何在使用 AbortController 中止后重新启动获取 api 请求
How to Restart fetch api request after aborting using AbortController
我正在处理外卖申请(使用 woocommerce API),订单将立即收到。我创建了一个简单的仪表板,其中显示所有订单并使用 fetch API 和 setinterval.
获取新订单
所以当用户点击他们在仪表板上收到的订单时。模型弹出窗口出现在用户管理订单的位置。但是由于 setinterval(for 5s) Model 消失了,为了解决这个问题,我使用了清除间隔的技术,所以当用户点击订单间隔时,不会进一步请求,直到用户在 Model 框上管理订单并按保存按钮,保存时我再次调用 setinterval 函数
但是在这种技术中,存在一个问题,如果 setinterval 将要执行并且用户单击订单并且因为提取已经被触发并且所有订单都已刷新,模型会消失。所以我必须再次点击订单(见图)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();
}
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);
我在 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>
);
}
我正在处理外卖申请(使用 woocommerce API),订单将立即收到。我创建了一个简单的仪表板,其中显示所有订单并使用 fetch API 和 setinterval.
获取新订单所以当用户点击他们在仪表板上收到的订单时。模型弹出窗口出现在用户管理订单的位置。但是由于 setinterval(for 5s) Model 消失了,为了解决这个问题,我使用了清除间隔的技术,所以当用户点击订单间隔时,不会进一步请求,直到用户在 Model 框上管理订单并按保存按钮,保存时我再次调用 setinterval 函数
但是在这种技术中,存在一个问题,如果 setinterval 将要执行并且用户单击订单并且因为提取已经被触发并且所有订单都已刷新,模型会消失。所以我必须再次点击订单(见图)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();
}
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);
我在 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>
);
}