业务场景:当时用fetch()建立长连接请求,在不使用时需要将其断掉,以缓解带宽压力和浏览器运行压力。等再次需要建立长链接时,再次启用。
1、外层定义controller;一旦中止,AbortController就会被消耗。每次调用都必须创建新的实例。
2、方法体内定义具体实现
const signal = controller.signal;
controller = new AbortController();
3、终端调用 controller.abort();
// 判断某条件,如果不等于空, 先将fetch请求中断, 再在window上new AbortController()
这里为啥要用window呢? 因为我将中断操作,和建立链接操作放在了一个函数内.
srtGet() {
if (this.value != "") {
window.controller.abort();
console.log("signal 的中止状态: ", signal);
}
window.controller = new AbortController();
let signal = window.controller.signal;
console.log("signal 的初始状态: ", signal);
fetch("/api/config/interface", {
signal,
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then((r) => )
.then(f);
},