Chapter 10 async函数 & await关键字

Heaven645

于 2024-09-03 07:00:00 发布

阅读量991

点赞数 39

分类专栏：【Vue2+Vue3】入门到实践文章标签： vue.js javascript 前端 await async 异步编程

本文链接：https://blog.csdn.net/2302_80253507/article/details/141829461

版权

【Vue2+Vue3】入门到实践专栏收录该内容

12 篇文章 0 订阅

订阅专栏

欢迎大家订阅【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() 方法处理返回的数据，并将其输出到控制台。

Heaven645

关注

39
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
Chapter 10 async函数 & await关键字

在现代 JavaScript 开发中，异步编程是一个重要的概念。随着 ES2017 的引入，`async` 函数和 `await` 关键字为处理异步操作提供了更简洁和可读的方式。本章详细讲解了这两个关键字的特性及其用法。
复制链接

扫一扫