【前端】使用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不会再执行。

相关推荐
Mapmost3 分钟前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端
太空程序猿21 分钟前
数据类型与变量
java·开发语言
San30.23 分钟前
Ajax 数据请求:从 XMLHttpRequest 到现代前端数据交互的演进
前端·ajax·交互
rit843249929 分钟前
MATLAB实现图像PCA降噪
开发语言·计算机视觉·matlab
西西西西胡萝卜鸡33 分钟前
虚拟列表(Virtual List)组件实现与优化铁臂猿版(简易版)
前端·vue.js
宇余40 分钟前
Unibest:新一代uni-app工程化最佳实践指南
前端·vue.js
*小雪1 小时前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
性野喜悲1 小时前
ts+uniapp小程序时间日期选择框(分开选择)
前端·javascript·vue.js
你不是我我2 小时前
【Java 开发日记】SQL 语句左连接右连接内连接如何使用,区别是什么?
java·javascript·数据库
ghie90902 小时前
C#语言中使用“using“关键字的介绍
开发语言·c#