如何按顺序执行JavaScript异步任务？带参异步执行顺序异常求解

问题根源 #

你在构造传入sequence的任务数组时，asyncOne("first")、asyncTwo("last")属于立即执行的函数调用表达式，会在数组初始化阶段就直接执行，对应的两个定时器同时启动，所以会优先输出first和last。只有未加调用括号的asyncTwo、asyncOne是函数引用，会等待reduce的then链执行到对应位置时才触发调用，自然排在了后面。

解决方案 #

方案1：手动包装传参函数为无参匿名函数 #

统一将需要传参的异步函数包裹为无参箭头函数，保证数组中所有任务都是函数类型，等待sequence内部调度时才执行：

(async () => {
  const res = await sequence([
    () => asyncOne("first"),
    asyncTwo,
    asyncOne,
    () => asyncTwo("last")
  ]);
})();

方案2：优化sequence逻辑支持参数绑定 #

如果不想每次手动包裹函数，可以调整sequence的判断逻辑，支持传入[异步函数, 入参1, 入参2...]的结构，内部自动处理参数传入：

const sequence = async tasks => {
  await tasks.reduce(
    (promise, task) => promise.then(() => {
      // 处理普通函数引用
      if (typeof task === "function") {
        return task()
      }
      // 处理带参数的任务结构
      if (Array.isArray(task)) {
        const [fn, ...args] = task
        return fn(...args)
      }
      return task
    }),
    Promise.resolve()
  );
};

// 调用示例
(async () => {
  const res = await sequence([
    [asyncOne, "first"],
    asyncTwo,
    asyncOne,
    [asyncTwo, "last"]
  ]);
})();

两种方案都可以实现你预期的输出顺序。

内容的提问来源于stack exchange，提问作者grimmbraten