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

相关文章

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》:本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印

C/C++错误信息处理的常见方法及函数

《C/C++错误信息处理的常见方法及函数》C/C++是两种广泛使用的编程语言,特别是在系统编程、嵌入式开发以及高性能计算领域,:本文主要介绍C/C++错误信息处理的常见方法及函数,文中通过代码介绍... 目录前言1. errno 和 perror()示例:2. strerror()示例:3. perror(

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

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

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