用async-await实现类似Promise.all()的执行效果

关注

原创最新推荐文章于 2026-04-21 23:45:34 发布 5.8k 阅读 AI 写同款· GEO 优化 ›

前端同步异步-setTimeout-Promise-async-await 是JavaScript中的一个定时器函数，主要作用是在指定的延迟时间（以毫秒为单位）后执行一次给定的函数或代码段。Promise在JavaScript中用于处理异步操作的结果。它是一个对象，用于包装一个还未完成的异步操作，可以在操作完成后进行相应的结果处理。async/await是JavaScript中处理一步操作的一种更简洁、更易于理解的语法糖，它是基于Promise构建的。阅读详情

使用函数：

awaitAll(fn1, fn2, fn3...)

async function awaitAll(...fnArr) {
  if ({}.toString.call(fnArr[0]) === '[object Array]') {
    fnArr = fnArr[0];
  }
  const fnNum = fnArr.length;
  const promiseArr = [];
  const resultArr = [];
  for (let i = 0; i < fnNum; i++) {
    promiseArr.push(fnArr[i]());
  }
  for (let i = 0; i < fnNum; i++) {
    resultArr.push(await promiseArr[i])
  }
  return resultArr;
}

测试：

function wait(ms) {return new Promise(resolve => setTimeout(() => resolve(), ms));}

async function fn1() {
  await wait(1000);
  console.log('fn1');
  await wait(1000);
  return 'fn1';
}

async function fn2() {
  await wait(3000);
  console.log('fn2');
  return 'fn2';
}

async function fn3() {
  console.log('fn3');
  await wait(2000);
  return 'fn3';
}

function fn4() {
  console.log('fn4');
  return 'fn4';
}

awaitAll(fn1, fn2, fn3, fn4).then(results => {
  console.log(results);
});
// 在3秒后，返回结果列表