JavaScript中如何实现异步函数的顺序执行?

20 min read

在JavaScript中,可以使用Promiseasync/await来实现顺序执行异步函数的操作。

使用Promise时,可以使用then()方法在每个异步函数完成后继续执行下一个异步函数。例如:

// 异步函数1
const asyncFunc1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('异步函数1执行完成')
      resolve()
    }, 1000)
  })
}

// 异步函数2
const asyncFunc2 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('异步函数2执行完成')
      resolve()
    }, 2000)
  })
}

// 顺序执行异步函数
asyncFunc1().then(asyncFunc2)

使用async/await时,可以在异步函数前添加async关键字来表示该函数是一个异步函数,然后使用await关键字在每个异步函数完成后继续执行下一个异步函数。例如:

// 异步函数1
const asyncFunc1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('异步函数1执行完成')
      resolve()
    }, 1000)
  })
}

// 异步函数2
const asyncFunc2 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('异步函数2执行完成')
      resolve()
    }, 2000)
  })
}

// 顺序执行异步函数
const execAsyncFuncs = async () => {
  await asyncFunc1()
  await asyncFunc2()
}

execAsyncFuncs()

以上两种方式都可以实现顺序执行异步函数的操作,具体使用哪种方式可以根据项目需要和个人喜好进行选择。