HTML 如何使用多个Fetch API调用并检查是否所有调用都已完成

要使用多个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

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。