前言
对于前端开发者来说，异步编程是一个很重要的概念。在 JavaScript 中，我们通常使用 Promise 来进行异步编程，但是 Promise 本身也存在一些问题，比如说链式调用会导致代码不够清晰，并且错误处理也需要写很多的代码。因此，async/await 语法的出现就成为了 Promise 的良好补充。
在 ECMAScript 2017 中，async 和 await 这两个关键字正式被引入到了 JavaScript 中。在 ECMAScript 2021 中，这两个关键字也有了进一步的发展。
本文将深入探讨 async/await 的使用方式、注意事项以及建议的最佳实践，希望能够帮助读者更好地使用这一语法糖。
async/await 的基础使用
async/await 是一种基于 Promise 的语法糖。async 用于定义一个异步函数，而 await 则是用于等待一个 Promise 对象的完成。让我们看一个简单的例子：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ---- - ----- --------------------------------------------- ------ ----- ------------ - ----------- ---------- -- ------------------ ------------ -- ----------------------展开代码
在这个例子中，我们定义了一个名为 fetchData 的异步函数。使用 await 关键字可以让代码在等待 fetch 请求完成时暂停执行。在等待数据请求完成后，我们使用 await 再次等待将收到的响应数据解析为 JSON 格式。
当 fetchData 被调用时，它会返回一个 Promise 对象。我们可以通过 then() 方法来获取 fetchData() 的解析结果。在这个例子中，我们将获得一个 JSON 格式的对象。
如果 fetchData() 被 reject，我们通过 catch() 方法捕获到错误并将其打印出来。
async/await 的高级使用
虽然前面的例子介绍了 async/await 的基本用法，在实际开发中还有许多需要掌握的使用技巧。
处理错误
async/await 可以大大简化错误处理。这是因为如果一个 Promise 被 rejected，它们的错误信息将会传递给 async 函数。因此，我们可以使用 try-catch 语句来捕获错误。看下面的例子：
-- -------------------- ---- ------- ----- -------- ----------- - --- - ----- ---- - ----- --------------------------------------------------- ------ ----- ------------ - ----- ------- - --------------------- - - ------------展开代码
在这个例子中，我们对代码进行了小改动。在开始操作之前，我们使用了 try 块。如果出现错误，执行流程会直接跳到 catch 块并输出错误信息。
同时执行多个 async 函数
在实际开发中，可能会遇到需要同时执行多个异步函数的情况。在这种情况下，我们可能希望等待所有函数都执行完毕后再处理结果。
这个需求可以通过使用 Promise.all() 方法来实现。Promise.all() 方法会接收一个由 Promises 组成的数组，然后等待它们全部执行完毕后返回一个包含所有结果的数组。
让我们看看下面的例子：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------- ------ - ----- ------------- --------------------------------------------- -------------------------------------------------- --- ----- ------- ------ - ----- -------------------------- --------------- ------------------- ------------------- - ------------展开代码
在这个例子中，我们定义了一个名为 fetchData 的异步函数。在 fetchData 中，我们同时执行了两个 fetch 请求。在两个请求都完成后，我们再将 response 数据解析为 JSON。最后，我们将两个结果打印到控制台上。
嵌套的 async 函数
async/await 允许我们在函数内部使用其他 async 函数，从而更好地组织和管理代码。在一些特定场景下，你可能会需要在 async 函数内部嵌套执行其他的 async 函数。
-- -------------------- ---- ------- ----- -------- ----------- - ----- ---- - ----- --------------------------------------------- ----- ------ - ----- --------------------- -- --------- ----- -------- ---------------- - ----- --------- - ----- ------------------------------------------------------- ----- ------------- - ----- ----------------- ------ ---------------------- -- --------- - ----- ----------- - ----- ----------------- -------------------- ------------------------- - ------------展开代码
在这个例子中，我们定义了一个嵌套了异步函数 fetchFollowers 的 fetchData 函数。fetchFollowers 函数会返回一个数组，包含了我在 GitHub 上的 followers 的 id 列表。
最佳实践
虽然 async/await 可以让我们更好地组织和管理异步代码，但是在实际开发中，也有一些需要注意的事项。
始终注册错误处理程序
更方便的错误处理是 async/await 的一大益处。在使用 async/await 时，记得在 catch 语句中注册错误处理程序。如果你不这样做，你的程序将不会捕获到遇到问题的 Promise。
-- -------------------- ---- ------- ----- -------- ----------- - --- - ----- ---- - ----- --------------------------------------------------- ------ ----- ------------ - ----- ------- - --------------------- - - ------------展开代码
在这个例子中，我们对代码进行了小改动。在开始操作之前，我们使用了 try 块。如果出现错误，执行流程会直接跳到 catch 块并输出错误信息。
将 async 函数与 Promise 链式调用配合使用
虽然 async/await 可以增加代码可读性，但是在某些情况下，使用 Promise 链式调用可能效果更佳。如果您需要在 Promise 链式调用中使用 async/await，您可以这样做：
return fetch('https://api.github.com/users/github') .then(response => response.json()) .then(data => fetchData(data)) .catch(error => console.error(error));
在这个例子中，我们使用 chain 语法调用 Promise，然后在第二步中使用我们的 fetchData 函数。
避免嵌套过深
async/await 允许我们在函数内部使用其他的 async 函数，可以让代码逻辑更清晰。然而，在使逻辑清晰的同时，请注意不要嵌套代码过多。如果代码嵌套过深，会导致函数布局不清晰，并且深度嵌套代码可能会出现性能问题。
结论
async/await 语法是 JavaScript 异步编程进化的一个重要里程碑。通过简化 Promise 的使用，它可以大大方便我们处理异步流程，提高代码的可读性和可维护性。
在学习和使用 async/await 语法时，请记得将错误处理程序与代码配合使用，以避免遇到难题和 Bug。此外，我们还应该注意避免代码嵌套过深，以免降低代码可读性并出现性能问题。
通过理解和熟练使用 async/await 语法，开发人员可以大大提高代码的质量和可维护性，使异步编程更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e24c85f551281025fd07c
