Chapter 10 async函数 await关键字

2024-09-03 10:20

本文主要是介绍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 被解析或拒绝。
asyncawait 关键字让我们可以用一种更简洁的方式写出基于 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):将获取到的数据输出到控制台。

执行流程如下:

  1. 调用 fetchData() 函数;
  2. fetchData 函数内部,发起网络请求到 https://api.example.com/data
  3. 等待请求完成,并获取响应;
  4. 将响应解析为 JSON 数据;
  5. 返回解析后的数据;
  6. 在调用 fetchData() 的地方,使用 .then() 方法处理返回的数据,并将其输出到控制台。

这篇关于Chapter 10 async函数 await关键字的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1132704

相关文章

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

kotlin的函数forEach示例详解

《kotlin的函数forEach示例详解》在Kotlin中,forEach是一个高阶函数,用于遍历集合中的每个元素并对其执行指定的操作,它的核心特点是简洁、函数式,适用于需要遍历集合且无需返回值的场... 目录一、基本用法1️⃣ 遍历集合2️⃣ 遍历数组3️⃣ 遍历 Map二、与 for 循环的区别三、高

C语言字符函数和字符串函数示例详解

《C语言字符函数和字符串函数示例详解》本文详细介绍了C语言中字符分类函数、字符转换函数及字符串操作函数的使用方法,并通过示例代码展示了如何实现这些功能,通过这些内容,读者可以深入理解并掌握C语言中的字... 目录一、字符分类函数二、字符转换函数三、strlen的使用和模拟实现3.1strlen函数3.2st

MySQL中COALESCE函数示例详解

《MySQL中COALESCE函数示例详解》COALESCE是一个功能强大且常用的SQL函数,主要用来处理NULL值和实现灵活的值选择策略,能够使查询逻辑更清晰、简洁,:本文主要介绍MySQL中C... 目录语法示例1. 替换 NULL 值2. 用于字段默认值3. 多列优先级4. 结合聚合函数注意事项总结C

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

MySQL 日期时间格式化函数 DATE_FORMAT() 的使用示例详解

《MySQL日期时间格式化函数DATE_FORMAT()的使用示例详解》`DATE_FORMAT()`是MySQL中用于格式化日期时间的函数,本文详细介绍了其语法、格式化字符串的含义以及常见日期... 目录一、DATE_FORMAT()语法二、格式化字符串详解三、常见日期时间格式组合四、业务场景五、总结一、

golang panic 函数用法示例详解

《golangpanic函数用法示例详解》在Go语言中,panic用于触发不可恢复的错误,终止函数执行并逐层向上触发defer,最终若未被recover捕获,程序会崩溃,recover用于在def... 目录1. panic 的作用2. 基本用法3. recover 的使用规则4. 错误处理建议5. 常见错

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详