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

相关推荐
freeWayWalker13 小时前
【前端工程化】前端代码规范与静态检查
前端·代码规范
FL162386312913 小时前
VTK源码编译时候选qt5路径
开发语言·qt
Felven13 小时前
C. Maximum Median
c语言·开发语言·算法
C2X13 小时前
关于Git Graph展示图的理解
前端·git
昊茜Claire13 小时前
鸿蒙开发之:性能优化与调试技巧
前端
雲墨款哥13 小时前
从一行好奇的代码说起:Vue怎么没有React的<StrictMode/>
前端
小肥宅仙女13 小时前
告别繁琐!React 19 新特性对比:代码量减少 50%,异步状态从此自动管理
前端·react.js
白兰地空瓶13 小时前
告别 add(1, 2)!通过 JS 柯里化,让你的代码更加优雅
javascript·面试
ohyeah13 小时前
柯理化(Currying):让函数参数一个一个传递
前端·javascript
CryptoRzz13 小时前
StockTV API 对接全攻略(股票、期货、IPO)
java·javascript·git·web3·区块链·github