在现代 Web 开发中，异步操作已经成为了不可或缺的一部分，而 ES8 引入的 Async Function 可以让我们更加方便地进行异步操作。本文将详细介绍 ES8 Async Function 和 Promise 的执行流程，并通过示例代码加深理解，帮助读者更好地掌握这一技术。
Async Function 与 Promise 的关系
Async Function 是 ES8 新增的一个语法特性，它可以让我们更加方便地编写异步代码。在 Async Function 中，我们可以使用 await 关键字来等待一个 Promise 完成，然后使用返回值继续操作。
async function foo() {
const result = await myPromise();
console.log(result);
}上述代码中的 myPromise 返回一个 Promise 对象，在使用 await 关键字等待该 Promise 完成后，result 就会被赋值为该 Promise 的返回值。
需要注意的是，只有在 Async Function 内部使用 await 才能获取到 Promise 的返回值，而在 Async Function 外部则需要使用 .then() 方法来获取。
async function foo() {
return await myPromise();
}
foo().then(result => {
console.log(result);
});上述代码中我们使用了 return 关键字将 myPromise 的返回值传递到外部。由于 foo 函数返回的是一个 Promise，因此我们可以使用 .then() 来获取返回值。
Async Function 的执行流程
下面来详细介绍 Async Function 的执行流程。
- 执行 Async Function，并创建一个新的 Promise 对象。
async function foo() {
// 创建一个新的 Promise 对象
return 'Hello World';
}- 执行 Async Function 内部的代码，直到遇到第一个
await关键字。
async function foo() {
console.log('Before await');
const result = await myPromise();
console.log('After await');
return result;
}上述代码中，在遇到第一个 await 关键字之前，console.log('Before await') 会被执行。
- 等待
await后面的 Promise 完成，并获取其返回值。
async function foo() {
const result = await myPromise();
return result;
}上述代码中，会等待 myPromise() 返回的 Promise 完成，并将其返回值赋给 result。
- 继续执行 Async Function 的代码，并返回最终结果。
async function foo() {
const result1 = await myPromise1();
const result2 = await myPromise2(result1);
return result2;
}上述代码中，在 myPromise1() 返回的 Promise 完成后，会执行 myPromise2(result1)，然后等待 myPromise2 返回的 Promise 完成，并将其返回值赋给 result2。最后，函数 foo 会返回 result2。
Promise 的执行流程
下面来详细介绍 Promise 的执行流程。
- 创建一个新的 Promise 对象，并执行传递给构造函数的函数。
const myPromise = new Promise((resolve, reject) => {
// 执行一些异步操作
});- 在异步操作完成后，决定 Promise 的状态并传递最终结果。
-- -------------------- ---- -------
----- --------- - --- ----------------- ------- -- -
------------- -- -
-- --- ------ --- -
-----------------
- ---- -
----------------
-
-- ------
---上述代码中，在异步操作完成后，我们通过 resolve 或 reject 方法来决定 Promise 的状态，并传递最终结果。
- 在 Promise 对象上调用
.then()或.catch()方法，以处理最终结果。
myPromise.then(result => {
console.log(result);
}).catch(reason => {
console.error(reason);
});上述代码中，我们可以在 Promise 对象上调用 .then() 或 .catch() 方法来处理最终结果。如果 Promise 的状态为 resolved，则 .then() 会被调用并传递最终结果；如果 Promise 的状态为 rejected，则 .catch() 会被调用并传递错误原因。
应用示例
下面通过一个示例来演示如何使用 Async Function 和 Promise 进行异步操作。
-- -------------------- ---- -------
----- -------- -------------- -
----- -------- - ----- -----------
-- -------------- -
----- --- ------------- -- ----- ------- ---------------------
-
------ ----------------
-
-------- ---------------- -
----- --------- - ------------------------------
------------------- - -
---------------------
------------ --------------------
--------- -----------------
--
-------------------------------------
-
-------- ------------------ -
----- --------- - ------------------------------
------------------- - ------
-------------------------------------
-
---------------------------------------------------------
-----------------
--------------------上述代码中，我们首先定义了一个 fetchJSON 函数，该函数用于从指定 URL 获取 JSON 数据，如果返回的响应状态码不为 200，则会抛出一个错误。然后，我们定义了 renderUser 和 renderError 函数，用于将结果渲染到页面上。
在调用 fetchJSON 函数时，我们通过 .then() 方法传递了 renderUser 和 renderError 作为回调函数，用于处理最终结果。如果 Promise 的状态为 resolved，则会调用 renderUser 方法并将 JSON 数据传递给它；如果 Promise 的状态为 rejected，则会调用 renderError 方法并将错误原因传递给它。
总结
本文详细介绍了 ES8 Async Function 和 Promise 的执行流程，并通过示例代码加深理解。希望读者们能够通过本文了解 Async Function 和 Promise 的使用方法，掌握异步编程的基本技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64586ae4968c7c53b0acc79a