JavaScript中如何串行执行多个异步任务？

在JavaScript的异步编程场景中，串行执行多个异步任务是非常常见的需求，比如需要先获取用户登录态，再基于登录态请求用户权限，最后根据权限渲染对应页面内容，这类任务之间存在明确的先后依赖关系，必须按顺序执行。下面我们就来介绍几种实现串行执行的核心方法。

一、基于Promise链式调用实现串行

Promise的then方法本身就会返回一个新的Promise，我们可以利用这个特性把多个异步任务串联起来，前一个任务完成后再执行下一个任务。这种方式适合任务数量固定、逻辑简单的场景。

// 模拟单个异步任务，返回Promise
function asyncTask(name, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`任务${name}执行完成，耗时${delay}ms`);
      resolve(`任务${name}的结果`);
    }, delay);
  });
}

// 串行执行三个异步任务
asyncTask('A', 1000)
  .then((res1) => {
    console.log('接收到上一个任务结果:', res1);
    return asyncTask('B', 800);
  })
  .then((res2) => {
    console.log('接收到上一个任务结果:', res2);
    return asyncTask('C', 500);
  })
  .then((res3) => {
    console.log('所有任务串行执行完成，最终结果:', res3);
  })
  .catch((err) => {
    console.error('任务执行出错:', err);
  });

二、使用async/await语法实现串行

async/await是ES2017引入的语法糖，基于Promise实现，能让异步代码写出同步代码的阅读体验，实现串行执行会非常直观，只需要把任务按顺序放在async函数中，用await等待前一个任务完成即可。

// 模拟单个异步任务
function asyncTask(name, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`任务${name}执行完成`);
      resolve(`任务${name}返回数据`);
    }, delay);
  });
}

// 串行执行函数
async function runSerialTasks() {
  try {
    const res1 = await asyncTask('A', 1000);
    console.log('任务A结果:', res1);
    const res2 = await asyncTask('B', 800);
    console.log('任务B结果:', res2);
    const res3 = await asyncTask('C', 500);
    console.log('任务C结果:', res3);
    console.log('所有串行任务执行完成');
  } catch (err) {
    console.error('串行执行过程出错:', err);
  }
}

runSerialTasks();

三、动态任务列表的串行执行

如果异步任务的数量是不固定的，存放在数组里，我们可以通过循环的方式实现串行执行，这里需要注意不能用forEach之类的并行遍历方法，要用for循环或者reduce来逐个执行。

1. 使用for循环实现

// 任务列表，每个元素是返回Promise的函数
const taskList = [
  () => asyncTask('A', 1000),
  () => asyncTask('B', 800),
  () => asyncTask('C', 500),
  () => asyncTask('D', 300)
];

async function runDynamicSerialTasks() {
  const results = [];
  for (let i = 0; i < taskList.length; i++) {
    const taskFn = taskList[i];
    const res = await taskFn();
    results.push(res);
  }
  console.log('所有动态任务串行执行完成，结果列表:', results);
}

runDynamicSerialTasks();

2. 使用reduce方法实现

const taskList = [
  () => asyncTask('A', 1000),
  () => asyncTask('B', 800),
  () => asyncTask('C', 500)
];

// 用reduce串联Promise
taskList
  .reduce((prevPromise, currentTaskFn) => {
    return prevPromise.then(() => {
      return currentTaskFn();
    });
  }, Promise.resolve())
  .then(() => {
    console.log('reduce方式串行执行所有任务完成');
  })
  .catch((err) => {
    console.error('执行出错:', err);
  });

四、不同方案的对比和注意事项

我们可以通过下面的表格对比几种实现方式的差异：

需要注意，串行执行和并行执行的区别：串行是一个任务完成后再执行下一个，总耗时是所有任务耗时之和；并行是多个任务同时执行，总耗时是最慢的那个任务的耗时。如果任务之间没有依赖关系，优先选择并行执行可以提升效率，只有存在依赖关系时才需要串行执行。

另外，不管用哪种方式实现串行，都不要忘记添加错误处理，避免某个任务失败导致整个执行流程中断。可以在每个任务后面单独加catch，也可以在最外层统一捕获错误，根据实际需求选择即可。

JavaScript异步任务串行执行Promiseasync_await修改时间：2026-05-29 22:44:28