在 JS 中如何实现顺序执行异步函数？

Question

在 JavaScript 中，顺序执行异步函数通常通过以下几种方法实现：

---

1. 使用 async/await

async/await 是最直观且现代的方式，可以让代码看起来像是同步的。

async function runSequentially() {
    const result1 = await asyncFunction1();
    console.log(result1);

    const result2 = await asyncFunction2();
    console.log(result2);

    const result3 = await asyncFunction3();
    console.log(result3);
}
runSequentially();

• asyncFunction1 , asyncFunction2 , 和 asyncFunction3 是返回 Promise 的异步函数。
• 使用 await 会暂停当前函数的执行，直到 Promise 解决（resolve/reject）。

---

2. 使用 Promise 链

在 async/await 之前，使用 Promise 链是实现顺序执行的主要方式。

asyncFunction1()
    .then(result1 => {
        console.log(result1);
        return asyncFunction2();
    })
    .then(result2 => {
        console.log(result2);
        return asyncFunction3();
    })
    .then(result3 => {
        console.log(result3);
    })
    .catch(error => {
        console.error(error);
    });

---

3. 使用 for 或 for...of 循环

当需要对一个数组中的异步任务顺序执行时，可以使用循环结合 async/await 。

const tasks = [asyncFunction1, asyncFunction2, asyncFunction3];

async function runSequentially() {
    for (const task of tasks) {
        const result = await task();
        console.log(result);
    }
}
runSequentially();

---

4. 使用 Array.reduce

使用 reduce 实现数组中的异步任务按顺序执行。

const tasks = [asyncFunction1, asyncFunction2, asyncFunction3];

tasks.reduce((promise, task) => {
    return promise.then(() => task().then(result => console.log(result)));
}, Promise.resolve());

---

5. 用递归实现

递归方式也是一种实现方法。

const tasks = [asyncFunction1, asyncFunction2, asyncFunction3];

function runSequentially(index = 0) {
    if (index >= tasks.length) return Promise.resolve();
    return tasks[index]().then(result => {
        console.log(result);
        return runSequentially(index + 1);
    });
}
runSequentially();

---

建议

• 优先使用 async/await ，它的语法更简洁，更容易阅读和维护。
• 如果你在处理的是复杂的 Promise 链条或需要动态控制时，可以根据需求选择其他方法。

---

// 模拟异步
function MyRequest(p, deplay) {
  this.p = p
  this.deplay = deplay
  this.setRequest = () => {
    return new Promise(resolve => {
      setTimeout(()=> {
        resolve(this.p)
      },this.deplay)
    })
  }
}

const p1 = new MyRequest(1,1000)
const p2 = new MyRequest(2, 1500)
const p3 = new MyRequest(3, 500)

// 没处理之前 打印出 3 1 2
p1.setRequest().then(res => console.log(res))
p2.setRequest().then(res => console.log(res))
p3.setRequest().then(res => console.log(res))
// -------------------------------------------------
// 第一种方法 Promise.all()
Promise.all([p1.setRequest(),p2.setRequest(),p3.setRequest()]).then((res) => {
  console.log(res); // [1,2,3]
})
// -----------------------------------------------------
//第二种方法 async/await

async function runAsync() {
  console.log(await p1.setRequest());
  console.log(await p2.setRequest());
  console.log(await p3.setRequest());
} 

runAsync() // 1 2 3
// -------------------------------------------------------
// 第三种 链式调用 then 方法
function runThen() {
  return p1.setRequest().then(res => {
    console.log(res); // 1
    return p2.setRequest()
  }).then(res => {
    console.log(res); // 2
    return p3.setRequest()
  }).then(res => {
    console.log(res); // 3
  })
}
runThen()