JS 如何顺序执行多个异步任务？

在 JS 中可以使用 Promise 和 async/await 来顺序执行异步任务。

使用 Promise 通过 then() 方法的链式调用来实现

// 定义异步任务 asyncTask1
function asyncTask1() {
 return new Promise(resolve => {
   // 异步操作：在 1000 毫秒后调用 resolve 方法
   setTimeout(() => {
     console.log('Async task 1');
     resolve();
   }, 1000);
 });
}

// 定义异步任务 asyncTask2
function asyncTask2() {
 return new Promise(resolve => {
   // 异步操作：在 2000 毫秒后调用 resolve 方法
   setTimeout(() => {
     console.log('Async task 2');
     resolve();
   }, 2000);
 });
}

// 顺序执行异步任务
asyncTask1().then(() => {
 // 当 asyncTask1 完成后，执行 asyncTask2
 return asyncTask2();
}).then(() => {
 // 执行完异步任务1和异步任务2后的逻辑
});

使用 async/await 可以将异步任务看做同步人物来执行

async function runAsyncTasks() {
 await asyncTask1();
 await asyncTask2();
 // 执⾏完异步任务1和异步任务2后的逻辑
}
runAsyncTasks();

生成器（Generator）确实是一种特殊的函数，其函数体内可以使用 yield 关键字。生成器函数使用 function* 声明，并且在函数体内可以通过 yield 暂停函数的执行，将一个值传递给生成器的调用者。

生成器函数的调用返回一个迭代器对象，该迭代器对象可以通过调用 next() 方法来依次获取生成器函数中使用 yield 产生的值。每次调用 next() 都会使生成器函数执行到下一个 yield，并返回一个包含 value 和 done 属性的对象，其中 value 是 yield 表达式的结果，而 done 表示生成器函数是否已经执行完成。

function* main() {
 const res1 = yield fn1('开始')
 const res2 = yield fn2(res1)
 const res3 = yield fn3(res2)
 console.log(res3, '全部执⾏完毕')
}
const task = main()
task.next()
function fn1(data) {
 setTimeout(() => {
 console.log('fn1执⾏', data)
 task.next('fn1执⾏完毕')
 }, 1000)
}
function fn2(data) {
 setTimeout(() => {
 console.log('fn2执⾏', data)
 task.next('fn2执⾏完毕')
 }, 1000)
}
function fn3(data) {
 setTimeout(() => {
 console.log('fn3执⾏', data)
 task.next('fn3执⾏完毕')
 }, 1000)
}
console.log('我是最开始同步执⾏的')