在 JavaScript 中，async/await 已经成为了处理异步代码的主流方式之一。然而，async/await 也存在着一些陷阱，这些陷阱可能会对代码的可读性、可维护性和性能产生负面影响。在 ES9 （也就是 ECMAScript 2018）中，async/await 进行了一些改进，但是仍需要注意其中的特性和陷阱。本文将会介绍在 ES9 中如何避免使用 async/await 的陷阱。
1. 避免在循环中使用 async/await
在使用 async/await 时，循环中的异步操作容易引起问题。当我们在循环中使用 async/await 时，每次循环都会等待前一个异步操作完成，这可能会导致性能问题。
下面的代码演示了这个问题：
-- -------------------- ---- -------
----- ----- - ---- -- --- ----------------- -- ------------------- ----
----- -------- ------ -
--- ---- - - -- - - --- ---- -
----- -----------
--------------
-
-
------上面的代码中，我们使用了一个 sleep 函数，它会等待一秒钟。接着我们在循环中调用这个函数进行睡眠操作。在执行过程中，我们发现每次循环都会等待前一个异步操作完成才会执行下一次循环，导致总共需要等待十秒钟才能完成程序。如果我们需要处理大量的异步任务，那么这个问题就会显得尤为突出。
为了解决这个问题，我们可以使用 Promise.all/map/for ，参照下面的代码：
-- -------------------- ---- -------
----- ----- - ---- -- --- ----------------- -- ------------------- ----
----- -------- ------ -
----- -------- - --
--- ---- - - -- - - --- ---- -
--------------------------
-
----- ---------------------
-------------------
-
------上述代码中，我们使用 Promise.all 来等待所有的异步操作完成。在循环中，我们先将每个异步操作的 Promise 存放在了 promises 数组中。然后通过 Promise.all 来等待这些 Promise 完成，从而不会阻塞程序的运行。
2. 不要混用 async/await 和 Promise
虽然 async/await 可以让我们更方便的处理异步操作，但是它仍然是基于 Promise 的。因此，不要混用 async/await 和 Promise。在同一个函数中，同时使用 async/await 和 Promise 可能会导致代码变得难以阅读和维护。
下面的代码演示了这个问题：
-- -------------------- ---- -------
----- -------- ------ -
----- -------- - -------------------- ------------------- -------------------
----- ------- - --
--- ---- - - -- - - ---------------- ---- -
----- ----- - ----- -----------
-------------------
-
--------------------
-
------在这个例子中，我们混用了 async/await 和 Promise。尽管它可以工作，但是这样的代码可读性并不好。在每次循环中，我们使用 await 等待 Promise 的完成，这显得过于冗长和繁琐。为了使代码更加清晰和易于理解，我们可以使用 Promise.all 来代替上述代码中的循环：
async function main() {
const promises = [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]
const results = await Promise.all(promises)
console.log(results)
}
main()使用 Promise.all 来等待所有的异步操作完成可以使代码更加简洁和易于理解。
3. 尽可能使用 promise 串联函数代替 async/await
除了两个上述的注意点，还有一种更好的方式可以解决 async/await 的陷阱，那就是使用 promise 串联。Promise 串联可以使我们避免使用 async/await 导致的性能问题，同时使代码更加直观和清晰。
下面是使用 async/await 处理异步操作的代码：
async function main() {
const value1 = await asyncFunction1()
const value2 = await asyncFunction2(value1)
const value3 = await asyncFunction3(value2)
console.log(value3)
}
main()如果使用 Promise 串联，将会是这样的代码：
function main() {
return asyncFunction1()
.then(value1 => asyncFunction2(value1))
.then(value2 => asyncFunction3(value2))
.then(value3 => console.log(value3))
}
main()使用 Promise 串联操作可以使代码更加直观、清晰，并且可以避免性能问题。
总结
ES9 改进了 async/await 的功能，这使得处理异步操作变得更加方便和简单。不过，async/await 也存在一些陷阱。在循环中使用 async/await 可能会导致性能问题；在同一个函数中混用 async/await 和 Promise 可能会使代码难以阅读和维护。为了避免这些问题，我们可以遵循一些最佳实践，例如使用 Promise.all/map/for 来处理循环中的异步操作，尽可能使用 promise 串联代替 async/await。这些技巧可以让我们更好地使用 async/await 来处理异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7e74df6b2d6eab3019cd5