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

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