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

相关推荐
小豆包api14 分钟前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
计算机毕业设计木哥20 分钟前
计算机毕设选题:基于Python+Django的B站数据分析系统的设计与实现【源码+文档+调试】
java·开发语言·后端·python·spark·django·课程设计
陈陈爱java31 分钟前
Spring八股文
开发语言·javascript·数据库
歪歪10035 分钟前
qt creator新手入门以及结合sql server数据库开发
c语言·开发语言·后端·qt·数据库开发
布列瑟农的星空37 分钟前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天39 分钟前
Vue3 实现 B站 视差 动画
前端
KenXu40 分钟前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮42 分钟前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界44 分钟前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说44 分钟前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first