摘要
JavaScript 是一门动态语言，它通常被用于异步编程，如 Ajax 调用、事件处理和定时器等。异步编程可以大大提高应用程序的性能和响应能力，但也会带来一些挑战，例如控制流的复杂性和错误处理等。ES2017 的 async/await 和 Promises 功能使得异步编程更容易、更并发、更清晰和更可维护。
本文介绍了 async/await 和 Promises 并发处理异步操作的基本概念，并提供了一些实用的示例代码和最佳实践。这篇文章适合所有前端开发者，无论是初学者还是专业人士。
介绍
异步编程是一种很有用的技术，但也很复杂。在传统的回调风格中，每个异步操作都要指定一个回调函数，并且这些回调函数之间可能相互嵌套，导致代码难以理解和维护。Promise 函数为异步操作提供了一种更优雅的方式，它可以将异步操作独立开来，使得代码更清晰，更可读。但是，Promise 仍然需要编写大量的 then 和 catch 方法，也会让代码变得冗长。而 async/await 能大大简化回调和 Promise 风格的代码写法，使代码更具可读性和可扩展性。接下来我们将详细介绍 async/await 和 Promises 并发处理异步操作的基本概念。
Promises
Promise 是一个异步操作的容器，它可以用来包装一个值或一个错误。Promise 支持许多有用的函数，如 then、catch、all 和 race，在处理异步操作时比回调更加舒适。在以下代码示例中，我们将使用 Promise 进行异步操作：
function fetchData(url) {
return fetch(url) // fetch 返回一个 Promise
.then( response => response.json() ) // 将 Response 转为 JSON
.then( data => console.log(data) ) // 处理 JSON 数据
.catch( err => console.log(err) ); // 捕获错误
}
fetchData('https://api.github.com/users/github')在这个读取 JSON 数据的简单例子中，我们使用了 fetch 方法从指定的 URL 加载 JSON 数据。fetch 方法返回一个 Promise，我们使用 then 和 catch 方法来处理异步操作执行时的成功和失败情况。then 方法接收一个回调函数作为其参数，它在 Promise 完成时执行并接收 Promise 结果作为其参数。catch 方法用于捕获由 Promise 或缺乏响应信息的错误对象抛出的错误。
async 和 await
async/await 是 ECMAScript 2017 中引入的一组关键字。它们大大简化了异步编程的写法，通过使用 Promise 和 setTimeout 等函数的包装来使代码模块化。await 关键字用于实现等待其他 Promise 执行完成，async 关键字用于标记一个异步函数。
下面是一个使用 async/await 处理异步操作的示例：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------------------
- ------------ -
-------------------
-
-
-------------------------------------------------这个例子使用 async 关键字来标记一个异步函数，它使用 await 关键字等待 fetch 方法的 Promise 完成。Promise 完成后，await 关键字立即返回 Promise 结果。使用 try 和 catch 来捕捉 Promise 或缺乏响应信息的任何错误。这种编写代码的方式使用了 ES2017 的语法特性，以简单而可读的方式处理异步操作并提高代码可维护性。
async 函数的最佳实践
在实施 async 函数时有一些最佳实践。下面是一些关键的提示和技巧，有助于写出高效的异步代码。
务必处理异常情况。由于异步操作可能包含许多错误，所以务必使用 try-catch 来处理异常情况，而不是简单地继续执行代码。
确保代码整洁且易于维护。代码整洁和易于维护是成功的关键，为此，应保持高质量的编程实践，以确保代码的可读性和可扩展性。
在 async 中使用返回值。使用 async/await 上下文中的返回值，以便让调用者获得所期望的结果，并能够链式地确定下一步的操作。
优先使用 await 而不是 then。在处理一个 Promise 对象时，可以使用 then 或 await。我们极力推荐使用 await 的方式，除非日常的 Promise 代码中已经使用 then 进行了处理。
处理 Promise 实例顺序的限制。在对 Promise 实例进行顺序排序时，可以使用 Promise.all 和 Promise.allSettled 两种方法，分别用来保持 Promise 对象的顺序和返回所有定义的 Promise 对象的值。
结论
ECMAScript 2017 中的 async/await 关键字和 Promise 对象，提供了一个更加优雅和简单的方式处理复杂的 JavaScript 异步流程。async/await 能让异步操作看起来更像同步操作，减少了编写错误的机会、让代码更容易理解和维护。我们鼓励开发者使用这些新特性，从而提高前端代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753a1d48bd460d3ada673ce