巧用 async 与 await 掌控 JavaScript 异步函数运行次序

2023-10-17 22:18:57

在现代web开发中，JavaScript扮演着举足轻重的角色。随着web应用日益复杂，开发人员面临着处理大量异步任务的挑战。为了应对这一挑战，JavaScript引入了async和await，为异步编程带来了新的可能。本文将重点探讨如何利用async和await控制JavaScript异步函数的执行顺序，让开发者能够更轻松地编写可读性强且易于维护的异步代码。

一、JavaScript异步编程简介

在深入探讨async和await之前，有必要对JavaScript的异步编程有一个基本的了解。JavaScript是一种单线程语言，这意味着它一次只能执行一个任务。然而，在web开发中，往往需要处理大量同时发生的事件，如网络请求、用户交互、定时器等。为了解决这一问题，JavaScript采用了异步编程模型，允许将某些任务放在后台执行，而不必等待其完成。

在异步编程中，通常使用回调函数来处理异步任务的执行结果。回调函数是在异步任务完成后被调用的函数。它可以接收异步任务的执行结果作为参数，并执行相应的处理逻辑。然而，回调函数的使用会带来代码可读性和可维护性的下降，尤其是当需要处理多个异步任务时，代码很容易变得混乱和难以理解。

二、async与await关键字的介绍

async和await是JavaScript中用于处理异步编程的新语法。它们可以使异步代码的编写更加简单和易于理解。async关键字用于定义一个异步函数，而await关键字用于暂停异步函数的执行，直到异步操作完成。

三、控制异步函数执行顺序

按顺序执行异步函数

使用async和await可以轻松实现异步函数的顺序执行。只需要在需要等待的异步函数前加上await关键字即可。例如：

async function main() {
  const result1 = await asyncFunction1();
  const result2 = await asyncFunction2();
  console.log(result1, result2);
}

main();

在上述代码中，main函数是一个异步函数，asyncFunction1和asyncFunction2也是异步函数。当main函数执行时，它会等待asyncFunction1执行完成并返回结果，然后等待asyncFunction2执行完成并返回结果。最后，main函数将这两个结果输出到控制台。

并行执行异步函数

如果需要同时执行多个异步函数，可以使用Promise.all()方法。Promise.all()方法接收一个包含多个Promise对象的数组作为参数，并返回一个新的Promise对象。当所有Promise对象都执行完成后，新的Promise对象将被解析，并返回一个包含所有Promise对象执行结果的数组。

例如：

const promises = [
  asyncFunction1(),
  asyncFunction2(),
  asyncFunction3()
];

Promise.all(promises).then((results) => {
  console.log(results);
});

在上述代码中，promises数组包含三个异步函数的Promise对象。Promise.all()方法将这些Promise对象作为参数，并返回一个新的Promise对象。当所有异步函数执行完成后，新的Promise对象将被解析，并将三个异步函数的执行结果作为数组返回。

四、注意：使用 async/await 和 Promise.all() 注意事项