要使用多个Fetch API调用并检查是否所有调用都已完成，可以使用以下步骤：
（图片来源网络，侵删）
1、创建一个空数组，用于存储Promise对象。
2、对于每个Fetch API调用，将其包装在一个Promise中，并将该Promise添加到数组中。
3、使用Promise.all()方法等待所有Promise完成。
4、在Promise.all()的回调函数中，检查所有Promise是否都已完成，如果所有Promise都已完成，执行相应的操作；如果有任何一个Promise失败，处理错误。
下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>多个Fetch API调用示例</title>
</head>
<body>
<script>
// 定义一个空数组，用于存储Promise对象
let promises = [];
// 定义三个Fetch API调用
const urls = [
'https://jsonplaceholder.typicode.com/todos/1',
'https://jsonplaceholder.typicode.com/todos/2',
'https://jsonplaceholder.typicode.com/todos/3'
];
// 遍历urls数组，为每个URL创建Fetch API调用，并将其包装在Promise中
urls.forEach(url => {
promises.push(fetch(url)
.then(response => response.json())
.catch(error => console.error('Error:', error)));
});
// 使用Promise.all()方法等待所有Promise完成
Promise.all(promises)
.then(results => {
// 检查所有Promise是否都已完成
if (results.every(result => result !== undefined)) {
console.log('所有Fetch API调用都已完成');
// 在这里执行相应的操作，例如显示结果等
} else {
console.log('有至少一个Fetch API调用失败');
// 在这里处理错误，例如显示错误信息等
}
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
在这个示例中，我们首先创建了一个空数组promises，用于存储Fetch API调用的Promise对象，我们定义了三个Fetch API调用，并将它们包装在Promise中，接下来，我们使用Promise.all()方法等待所有Promise完成，在Promise.all()的回调函数中，我们检查所有Promise是否都已完成，如果所有Promise都已完成，我们输出一条消息；如果有任何一个Promise失败，我们输出另一条消息。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477422.html
微信扫一扫