我需要更改定义哪些数据应来 self 的请求的参数,并且该应用程序还需要定期刷新。如果用户在未完成的请求中更改参数,事情就会开始变得奇怪,并且会发生一些意外的行为。
所以我的方法是在开始新请求之前中止所有先前的请求,但是使用 awaitcontroller.abort()
后似乎永远不会触发下一个请求,我是否需要清除信号或类似的东西?
const controller = new AbortController();
const async fetchData = (url, body = null) => {
let data;
const signal = controller.signal;
const headers = { ... };
response = await fetch(url, body ? {
method: "POST",
body: JSON.stringify(body),
signal,
headers
} : { headers, signal });;
data = await response.json()
return data
}
const firstData = await fetchData(url1, body1);
await controller.abort();
const secondData= await fetchData(url2, body2);
发生的情况是,secondData
始终是未定义
,实际上第二个请求从未发生(查看网络流量)。如果我在执行 .abort()
后停止源代码并尝试运行 await fetchData(url2)
,则会提示错误,指出 Uncaught SyntaxError:await 才有效在异步函数中
或者如果我尝试在没有await
的情况下运行它,它会返回一个待处理的 promise ,但在流量选项卡中看不到实际的请求。
已解决
应用 ansewr 上的建议,我在函数上创建了包装器,每次都调用新的 Controller 。
let controller = null;
let fetchData = null;
const initializeFetchData = () => {
const controller = new AbortController();
const async fetchData = (url, body = null) => {
let data;
const signal = controller.signal;
const headers = { ... };
response = await fetch(url, body ? {
method: "POST",
body: JSON.stringify(body),
signal,
headers
} : { headers, signal });;
data = await response.json()
return data
}
}
initializeFetchData();
const firstData = await fetchData(url1, body1);
controller.abort();
initializeFetchData();
const secondData= await fetchData(url2, body2);
最佳答案
您对两个不同的请求使用相同的AbortController
。在 AbortController
上调用 .abort()
后,您已更新了 AbortSignal
的状态,然后该状态将导致第二个请求无效。
如果您想要这种行为,您应该为每个请求使用单独的AbortController
。当然,如果您希望能够一次性中止所有请求,那么为多个 fetch
请求重用 AbortController
是完全可以接受的。
其他几点...
.abort()
是一个同步方法,它返回void
,因此调用.abort 时不需要
.await
前缀()- 在您的代码示例中,第一个请求永远不会中止,因为您正在等待
fetch
请求,该请求将在.abort()<之前完成
被调用。
关于javascript - 中止上一个请求后无法发出新的获取请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63412985/