Chapter 10 async函数 await关键字

news2024/9/23 1:20:26

欢迎大家订阅【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));