【前端】使用Promise达到循环调用接口的效果

Promise.all()

要使用Promise.all调用同一个异步方法多次并将所有结果收集起来,你可以创建一个包含该方法调用的Promise数组,然后将这个数组传递给Promise.all。示例:

假设你有一个异步方法fetchData(id),你想针对一组ID调用它并等待所有结果。

javascript 复制代码
async function fetchData(id) {
    // 这里是你的异步操作,比如API调用
    // 示例中使用setTimeout模拟延迟
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Data for ID ${id}`);
        }, 1000);
    });
}

// ID列表
const ids = [1, 2, 3, 4, 5];

// 使用map遍历ID列表,为每个ID调用fetchData方法,并收集所有的Promise
const promises = ids.map(id => fetchData(id));

// 使用Promise.all等待所有Promise完成
Promise.all(promises)
    .then(results => {
        console.log("所有请求的结果:", results);
    })
    .catch(error => {
        console.error("其中一个请求失败:", error);
    });

Promise.all会等待所有Promise完成(不论是成功还是失败)。当所有Promise都解决(resolve)时,.then()会被调用,并且会接收一个数组,其中包含了所有Promise解决的结果。如果有任何Promise被拒绝(reject),.catch()会立即被调用,且后续的Promise不会再执行。

相关推荐
Java面试题总结几秒前
go从零单排之方法
开发语言·后端·golang
Jay_Franklin1 分钟前
Python一站式科研工作流:从数据分析到报告生成
开发语言·python·论文笔记
小堃学编程3 分钟前
【项目实战】基于protobuf的发布订阅式消息队列(1)—— 准备工作
java·大数据·开发语言
setmoon2145 分钟前
C++中的构建器模式
开发语言·c++·算法
2301_815482935 分钟前
C++中的桥接模式变体
开发语言·c++·算法
SuperEugene5 分钟前
Vue3 Props 传参实战规范:必传校验 + 默认值 + 类型标注,避开 undefined / 类型混用坑|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
ZHOUPUYU5 分钟前
PHP性能分析与调优:从定位瓶颈到实战优化
开发语言·后端·html·php
yunyun321236 分钟前
C++与量子计算模拟
开发语言·c++·算法
吴声子夜歌7 分钟前
JavaScript——数组
java·javascript·算法
weixin_462901978 分钟前
ESP32电压显示
开发语言·javascript·css·python