在使用 Async 函数时，我们经常会遇到多层 then 链的问题。这种情况下，代码会变得杂乱无章，难以维护和阅读。本文将介绍如何使用 Async/Await 来解决这个问题，让代码更加简洁易读。
Async/Await 简介
Async/Await 是 ECMAScript 2017 标准中新增的语法糖，它可以让异步操作的代码看起来更像同步代码。使用 Async/Await 可以简化 Promise 的 then 链，让代码更加易读易懂。
Async/Await 的基本语法如下：
async function foo() {
const result = await someAsyncOperation();
return result;
}在这个例子中，我们使用 async 关键字声明了一个异步函数 foo。在函数体内，我们使用 await 关键字来等待一个异步操作的结果。当异步操作返回结果时，我们可以直接使用它，就像同步代码一样。
解决多层 then 链问题
在 ES7 中，我们可以使用 Async/Await 来解决多层 then 链的问题。下面是一个示例代码：
-- -------------------- ---- ------- ----- -------- ----------- - ----- --------- - ----- --------------------------------------- ----- ----- - ----- ----------------- ----- --------- - ----- --------------------------------------- ----- ----- - ----- ----------------- ------ ------- ------- -
在这个示例代码中，我们定义了一个名为 fetchData 的异步函数。在函数体内，我们使用 await 关键字等待两个异步操作的结果，并将它们存储在 data1 和 data2 变量中。最后，我们将 data1 和 data2 作为一个数组返回。
使用 Async/Await 可以让代码更加简洁易读。如果使用 Promise 的 then 链来实现同样的功能，代码会变得更加冗长和难以阅读。
总结
在 ES7 中，使用 Async/Await 可以解决多层 then 链的问题，让代码更加简洁易读。在编写异步代码时，我们应该优先考虑使用 Async/Await，而不是使用 Promise 的 then 链。这样可以让我们的代码更加易读易懂，也更加容易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6504d0b595b1f8cacd166baf