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

相关文章

hdu1171(母函数或多重背包)

题意:把物品分成两份,使得价值最接近 可以用背包,或者是母函数来解,母函数(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v) 其中指数为价值,每一项的数目为(该物品数+1)个 代码如下: #include<iostream>#include<algorithm>

C++操作符重载实例(独立函数)

C++操作符重载实例,我们把坐标值CVector的加法进行重载,计算c3=c1+c2时,也就是计算x3=x1+x2,y3=y1+y2,今天我们以独立函数的方式重载操作符+(加号),以下是C++代码: c1802.cpp源代码: D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数

函数式编程思想

我们经常会用到各种各样的编程思想,例如面向过程、面向对象。不过笔者在该博客简单介绍一下函数式编程思想. 如果对函数式编程思想进行概括,就是f(x) = na(x) , y=uf(x)…至于其他的编程思想,可能是y=a(x)+b(x)+c(x)…,也有可能是y=f(x)=f(x)/a + f(x)/b+f(x)/c… 面向过程的指令式编程 面向过程,简单理解就是y=a(x)+b(x)+c(x)

Oracle Start With关键字

Oracle Start With关键字 前言 旨在记录一些Oracle使用中遇到的各种各样的问题. 同时希望能帮到和我遇到同样问题的人. Start With (树查询) 问题描述: 在数据库中, 有一种比较常见得 设计模式, 层级结构 设计模式, 具体到 Oracle table中, 字段特点如下: ID, DSC, PID; 三个字段, 分别表示 当前标识的 ID(主键), DSC 当

利用matlab bar函数绘制较为复杂的柱状图,并在图中进行适当标注

示例代码和结果如下:小疑问:如何自动选择合适的坐标位置对柱状图的数值大小进行标注?😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87

OpenCV结构分析与形状描述符(11)椭圆拟合函数fitEllipse()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C++11 算法描述 围绕一组2D点拟合一个椭圆。 该函数计算出一个椭圆,该椭圆在最小二乘意义上最好地拟合一组2D点。它返回一个内切椭圆的旋转矩形。使用了由[90]描述的第一个算法。开发者应该注意,由于数据点靠近包含的 Mat 元素的边界,返回的椭圆/旋转矩形数据

关键字synchronized、volatile的比较

关键字volatile是线程同步的轻量级实现,所以volatile性能肯定比synchronized要好,并且volatile只能修饰于变量,而synchronized可以修饰方法,以及代码块。随着JDK新版本的发布,synchronized关键字的执行效率上得到很大提升,在开发中使用synchronized关键字的比率还是比较大的。多线程访问volatile不会发生阻塞,而synchronize

Unity3D 运动之Move函数和translate

CharacterController.Move 移动 function Move (motion : Vector3) : CollisionFlags Description描述 A more complex move function taking absolute movement deltas. 一个更加复杂的运动函数,每次都绝对运动。 Attempts to

✨机器学习笔记(二)—— 线性回归、代价函数、梯度下降

1️⃣线性回归(linear regression) f w , b ( x ) = w x + b f_{w,b}(x) = wx + b fw,b​(x)=wx+b 🎈A linear regression model predicting house prices: 如图是机器学习通过监督学习运用线性回归模型来预测房价的例子,当房屋大小为1250 f e e t 2 feet^

JavaSE(十三)——函数式编程(Lambda表达式、方法引用、Stream流)

函数式编程 函数式编程 是 Java 8 引入的一个重要特性,它允许开发者以函数作为一等公民(first-class citizens)的方式编程,即函数可以作为参数传递给其他函数,也可以作为返回值。 这极大地提高了代码的可读性、可维护性和复用性。函数式编程的核心概念包括高阶函数、Lambda 表达式、函数式接口、流(Streams)和 Optional 类等。 函数式编程的核心是Lambda