本文主要是介绍Chapter 10 async函数 await关键字，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！
文章目录
- 前言
- 一、async 函数
- 二、await 关键字
前言
在现代 JavaScript 开发中，异步编程是一个重要的概念。随着 ES2017 的引入，async 函数和 await 关键字为处理异步操作提供了更简洁和可读的方式。本章详细讲解了这两个关键字的特性及其用法。
一、async 函数
async 函数是使用 async 关键字声明的异步函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。
async 函数会返回一个 Promise 对象。即使函数内部没有显式返回 Promise，JavaScript 也会将其返回值包装成一个 Promise。
【示例】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>async function example() { return "Hello, World!"; } example().then(result => console.log(result)); </script>
</body>
</html>
运行结果：
控制台打印输出“Hello, World!”
【分析】
本例代码定义了一个异步函数example，该函数返回一个解析为 “Hello, World!” 的 Promise。通过调用这个函数并使用 then 方法将 “Hello, World!” 输出到控制台。
async function example() { return "Hello, World!";
}
async关键字：在函数前加上async关键字，声明这个函数是一个异步函数，会返回一个Promise对象。- 函数体：JavaScript 会自动将字符串 "Hello, World!"包装成一个
Promise，该函数实际上返回的是一个解析为 “Hello, World!” 的Promise。
example().then(result => console.log(result));
- 调用函数：当调用
example()时，它会立即返回一个Promise。 .then()方法：then方法用于处理Promise的结果。它接受一个回调函数作为参数，这个回调函数会在Promise被解析时执行。result参数：当Promise被解析时，result将接收到Promise的解析值。在本例子中，result为"Hello, World!"。
执行流程如下：
①调用 example()，返回一个 Promise，状态是“待定”（pending）；
② return "Hello, World!";，返回值（“Hello, World!”）被包装成一个 Promise，并且状态变为“已解决”（fulfilled）；
③ .then() 中的的回调函数被调用，result 参数接收到 “Hello, World!”，并在控制台输出。
二、await 关键字
await 关键字只能在 async 函数内部使用。它用于等待一个 Promise 被解析或拒绝。
async 和 await 关键字让我们可以用一种更简洁的方式写出基于 promise 的异步行为，而无需刻意地链式调用 promise 。
【示例】
async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}
fetchData().then(data => console.log(data));
① async function fetchData() { ... }
async关键字：该关键字用于定义一个异步函数。异步函数允许你在函数内部使用await关键字来等待异步操作完成。fetchData：函数名称，用于从指定的 API 获取数据。
② const response = await fetch('https://api.example.com/data');
fetch函数：一个内置的 JavaScript 函数，用于发起网络请求。它返回一个Promise，表示请求的结果。await关键字：用于等待fetch函数返回的Promise被解析，即代码会在这一行暂停，直到请求完成并返回响应。response：请求的响应对象，包含了服务器返回的数据和状态信息。
③const data = await response.json();
response.json()：用于将响应体解析为 JSON 格式的数据，返回一个Promise，表示解析的结果。await：代码会在这一行暂停，直到response.json()返回的Promise被解析。data：解析后的数据，通常是一个 JavaScript 对象或数组，包含了从 API 获取的信息。
④ return data;：将解析后的数据返回给调用 fetchData 函数的地方。
⑤ .then(data => console.log(data))：一个链式调用，用于处理 fetchData 返回的 Promise。
then方法接受一个回调函数，当Promise被解析时，这个回调函数会被调用。data参数将接收到fetchData返回的数据。console.log(data)：将获取到的数据输出到控制台。
执行流程如下：
- 调用
fetchData()函数； - 在
fetchData函数内部，发起网络请求到https://api.example.com/data； - 等待请求完成，并获取响应；
- 将响应解析为 JSON 数据；
- 返回解析后的数据；
- 在调用
fetchData()的地方，使用.then()方法处理返回的数据，并将其输出到控制台。
这篇关于Chapter 10 async函数 await关键字的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
