什么是 async/await
async 和 await 是ES8引入的新关键字。
async 关键字用来修饰函数，表示该函数是一个异步函数，异步函数返回的是一个 Promise 对象。而 await 关键字可以用来等待一个异步函数的执行结果，并且只能在异步函数中使用。
这两个关键字的出现，让我们在编写异步代码时，可以使用同步的代码风格，大大提高了代码的可读性和可维护性。
常见陷阱
虽然 async/await 看起来是很简单的语法，但在实际使用时还是有一些坑点需要留意。
忘记使用 try-catch
await 关键字只能在异步函数中使用，但是异步函数中可能会发生异常，我们需要使用 try-catch 捕获异常，避免抛出未捕获的异常。
示例代码：
----- -------- --------- -
--- -
----- ------ - ----- ----------
--------------------
- ----- ------- -
---------------------
-
-忘记给 Promise 对象增加 catch 处理
在一个异步函数中，如果 await 返回了一个错误的 Promise 对象，如果没有加上 catch 处理，程序会直接崩溃。
示例代码：
----- -------- --------- - ----- ------------------ ---------------- ------------------ --- ------- - --------------------- -- ----------------------
同时使用 Promise 和 async/await
在一个异步函数中，同时使用 Promise 和 async/await 可能会导致程序逻辑混乱和出现异常。建议在一个异步函数中只使用一个方式来解决异步编程问题。
示例代码：
----- -------- --------- - ----- ------------- - ----- ------------ ----- ----------- - ----- ---------- -- ---- ------------- - ----------- ----- -
忘记使用 await
在异步函数中如果不使用 await 关键字，会导致代码逻辑混乱。
示例代码：
----- -------- --------- -
--------------------- -- -
--------------------
---
------------------ --- -------
-
----------忘记定义异步函数
在使用 async/await 时，要记住一件事：await 关键字只能在异步函数内部使用。如果忘记把某个函数定义为异步函数，会导致程序逻辑混乱。
示例代码：
-------- -------- - ------ -- - ----- -------- --------- - ----- ------ - ----- --------- -------------------- - ---------- -- ---------- ---------------- -- --- - --------
避免陷阱的技巧
要避免常见的陷阱，我们需要掌握以下技巧。
不要忘记使用 try-catch
在一个异步函数中，使用 await 时一定要加上 try-catch 处理，防止未捕获的异常导致程序崩溃。
----- -------- --------- -
--- -
----- ------ - ----- ----------
--------------------
- ----- ------- -
---------------------
-
-使用 Promise 处理异常
在一个异步函数中，如果需要使用多个异步操作，可以使用 Promise.all 来处理，或者在函数中使用多个异步操作时，使用 Promise 手动进行处理。
----- -------- --------- - ----- ------ - ----- ------------------------ ------------- -------------------- -
把异步函数和同步函数分开
在一个函数中，我们可以把异步操作和同步操作分开，确保代码逻辑的清晰和可读性。
----- -------- --------- -
----- ------------- - ----- ------------
----- ----------- - ----- ----- -------- ----------- -
-- ---
----
----- ---------- - ---------
-------------------------- ------------ ------------
-不要在循环中大量使用异步函数
在一个循环中，如果大量使用异步函数，可能会导致程序性能降低。建议使用 Promise.all 或者 async 函数简化相似的异步操作。
如果一定要在循环中使用异步函数，可以考虑使用 Promise.allSettled 等新的 Promise API 来优化程序性能。
----- -------- --------- -
----- ------- - ---
--- ---- - - -- - - -- ---- -
----- ------ - ----- -----------
---------------------
-
---------------------
-总结
使用 async/await 关键字可以极大地提高异步代码的可读性和可维护性，但在使用时还是需要注意一些陷阱。
要避免这些陷阱，我们需要在代码中加入 try-catch 处理，不要忘记给 Promise 添加 catch 处理，避免同时使用 Promise 和 async/await，并且将异步操作和同步操作分开。
还需要注意避免在循环中大量使用异步函数，而是使用 Promise.all 或者 async 函数简化相似的异步操作。在使用异步函数时，如果掌握了这些技巧，就可以避免常见的陷阱并提高程序性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b76802add4f0e0ffff71fe