为什么fetch()在for循环中不退出?

Question

我使用fetch()来打印标签。在某些情况下，我需要循环遍历数据并打印多个标签。打印工作正常，但是在第一个循环之后，脚本停止运行。

我使用async函数是为了降低打印速度。

async function printing() {
for (let w = 0; w < print_labels.length; w++) {

const label = `data of the label`
fetch('http://111.111.1.111:9100', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: label
})

console.log(`${w}. label printed.`)
await sleep(2000);

}
}; 
printing()

如何取消/停止fetch()函数?或者任何其他解决方案如何使用fetch() post for循环?

Answer 1

AbortController需要用于中止请求，正如另一个答案所提到的那样。失败和中止的fetch都会抛出错误，为了不引起异常，需要正确处理错误。

请求承诺通常需要等待。在这种情况下，race可以用来处理请求和延迟承诺:

let controller = new AbortController();
try {
await Promise.race([
fetch(..., { ... , signal: controller.signal }),
new Promise(resolve => {
setTimeout(resolve);
controller.abort();
}, 2000);
]));
} catch (err) {
console.error('Failed');
}

中止的请求导致一个错误，可以用err.name === 'AbortError'检查和必要时抑制，但在这种情况下，这可能不需要，因为延迟承诺在超时时首先解决，并使Promise.race与undefined一起解决，AbortError被抑制。