JS-30-async函数

上一节说,JavaScript异步操作需要通过Promise实现,一个Promise对象在操作网络时是异步的,等到返回后再调用回调函数,执行正确就调用then(),执行错误就调用catch()

虽然异步实现了,不会让用户感觉到页面“卡住”了,但是一堆then()catch()写起来麻烦看起来也乱。

有没有更简单的写法?

一、async函数

可以用关键字async配合await调用Promise,实现异步操作,但代码却和同步写法类似:

async function get(url) {let resp = await fetch(url);return resp.json();
}

Fetch API简介

使用async function可以定义一个异步函数,异步函数和Promise可以看作是等价的

在async function内部,用await调用另一个异步函数,写起来和同步代码没啥区别,但执行起来是异步的。

也就是说:

let resp = await fetch(url);

自动实现了异步调用,它和下面的Promise代码等价:

let promise = fetch(url);
promise.then((resp) => {// 拿到resp
})

如果我们要实现catch()怎么办?用Promise的写法如下:

let promise = fetch(url);
promise.then((resp) => {// 拿到resp
}).catch(e => {// 出错了
});

await调用时,直接用传统的try{ ... } catch

async function get(url) {try {let resp = await fetch(url);return resp.json();} catch (e) {// 出错了}
}

用async定义异步函数,用await调用异步函数,写起来和同步代码差不多,但可读性大大提高。

需要特别注意的是,await调用必须在async function中,不能在传统的同步代码中调用。

那么问题来了,一个同步function怎么调用async function呢?

首先,普通function直接用await调用异步函数将报错:

async function get(url) {let resp = await fetch(url);return resp.json();
}function doGet() {let data = await get('/api/categories');console.log(data);
}doGet();

如果把await去掉,调用实际上发生了,但我们拿不到结果,因为我们拿到的并不是异步结果,而是一个Promise对象:

async function get(url) {let resp = await fetch(url);return resp.json();
}function doGet() {let promise = get('/api/categories');console.log(promise);
}doGet();// [object Promise]

异步函数总是返回一个Promise对象。如果函数体中没有显式地返回任何值,或者返回了一个非Promise值,那么这个值会被包装成一个已解决的Promise返回。

async function resolveWithValue() {  return 'Hello, World!'; // 返回一个已解决的Promise,其值为'Hello, World!'  
}  async function resolveWithUndefined() {  // 没有返回值,但会隐式地返回一个已解决的Promise,其值为undefined  
}

因此,在普通function中调用async function,不能使用await,但可以直接调用async function拿到Promise对象,后面加上then()catch()就可以拿到结果或错误了:

async function get(url) {let resp = await fetch(url);return resp.json();
}function doGet() {let promise = get('/api/categories');promise.then(data => {// 拿到datadocument.getElementById('test-response-text').value = JSON.stringify(data);});
}doGet();

因此,定义异步任务时,使用async function比Promise简单,调用异步任务时,使用await比Promise简单,捕获错误时,按传统的try...catch写法,也比Promise简单。只要浏览器支持,完全可以用async简洁地实现异步操作。

值得注意的是,虽然await使异步代码看起来像同步代码一样简单,但它并没有改变JavaScript的单线程和非阻塞特性。

await一个Promise时,JavaScript引擎会暂停当前async函数的执行,直到Promise解决或拒绝,然后继续执行后续的代码。在这个过程中,JavaScript引擎可以处理其他任务,比如事件监听、其他Promise的解决等,因此它仍然是非阻塞的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/818606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

07 SQL进阶 -- 集合运算 -- 表的加减法

1. 表的加减法 1.1 什么是集合运算 集合在数学领域表示“各种各样的事物的总和”, 在数据库领域表示记录的集合. 具体来说,表、视图和查询的执行结果都是记录的集合, 其中的元素为表或者查询结果中的每一行。 在标准 SQL 中, 分别对检索结果使用 UNION, INTERSECT, EXCEPT 来…

【企业场景】设计模式重点解析

设计模式 在平时的开发中,涉及到设计模式的有两块内容: 我们平时使用的框架(比如spring、mybatis等)我们自己开发业务使用的设计模式。 在平时的业务开发中,其实真正使用设计模式的场景并不多,虽然设计号…

OpenHarmony实战开发-MpChart图表实现案例。

介绍 MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示&#xf…

C#基础|数据类型、变量

哈喽,你好啊,我是雷工! 01 数据类型 数据类型是为了方便存储数据的,为了将数据按照不同的分类存储,所以引入数据类型。这个在PLC中已经很熟悉了。 数据类型的作用:就是为了更好地管理内存,为…

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记13:RTC实时时钟

系列文章目录 嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记01:赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记02:开发环境安装 嵌入式|蓝桥杯STM32G431(…

基于Python长时间序列遥感数据处理及在全球变化、物候提取、植被变绿与固碳分析、生物量估算与趋势分析

原文链接:基于Python长时间序列遥感数据处理及在全球变化、物候提取、植被变绿与固碳分析、生物量估算与趋势分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601336&idx4&sn143be5669da8ad336a455a4cca3d4b6a&chksmfa820d5fcdf584491…

【机器学习】机器学习创建算法第6篇:线性回归,学习目标【附代码文档】

机器学习(算法篇)完整教程(附代码资料)主要内容讲述:机器学习算法课程定位、目标,K-近邻算法定位,目标,学习目标,1 什么是K-近邻算法,1 Scikit-learn工具介绍,2 K-近邻算法API。K-近邻算法,1.4 …

【七 (1)指标体系建设-构建高效的故障管理指标体系】

目录 文章导航一、故障概述1、故障:2、故障管理: 二、指标体系概述1、指标2、指标体系 三、指标体系构建难点1、管理视角2、业务视角3、技术视角 四、指标体系构建原则1、与战略目标对齐2、综合和平衡3、数据可获得性4、可操作性5、具体和可衡量6、参与和…

lua学习笔记20(lua中一些自带库的学习)

print("*****************************lua中一些自带库的学习*******************************") print("*************时间***************") --系统时间 print(os.time()) --自己传入参数得到时间 print(os.time({year2011,month4,day5})) --os.data(&qu…

00 【哈工大_操作系统】Bochs 汇编级调试方法及指令

本文将介绍一下哈工大李治军老师《操作系统》课程在完成Lab时所使用到的 Bochs 调试工具的使用方法。这是一款汇编级调试工具,打开调试模式非常简单,只需在终端下输入如下指令: 1、bochs 调试基本指令大全 功能指令举例在某物理地址设置断点…

Xxl-job执行器自动注册不上的问题

今天新建的项目要部署xxl-job,之前部署过好多次,最近没怎么部署,生疏了。部署完之后,服务一直没有注册到执行器管理里面,找了半天也没找到原因,看数据库里的xxl_job_registry表也是一直有数据进来。 后来看…

小白也能看懂的BEV感知(一)

1. 引言 随着人工智能技术的不断发展,自动驾驶越来越多地出现在我们的视野中,智能化和电动化已经成为汽车行业的主旋律。无论是从研究的角度还是从工程的角度来看,它都像是一个巨大的宝藏,等待着我们去探索。本文将介绍这一技术的…

从51到ARM裸机开发实验(009)LPC2138 中断实验

一、场景设计 中断的概念在《从51到ARM裸机开发实验(007) AT89C51 中断实验》中已经介绍过,LPC2138的Keil工程创建在《从51到ARM裸机开发实验(005)LPC2138 GPIO实验》中已经介绍过。本次使用LPC2138来实现一个这样的场景:四个LED依次亮灭,时间…

测试人必看,小程序常见问题

小程序是一种轻盈的存在,用户无需为了使用它而下载和安装。它依附于微信这个强大的平台,只需轻轻一扫或一搜,它便跃然屏上,随时服务。小程序为我们带来更多前所未有的惊喜和便利,以下分享关于小程序相关的热门问题。 …

链表基础3——单链表的逆置

链表的定义 #include <stdio.h> #include <stdlib.h> typedef struct Node { int data; struct Node* next; } Node; Node* createNode(int data) { Node* newNode (Node*)malloc(sizeof(Node)); if (!newNode) { return NULL; } newNode->data …

逆向IDA中Dword,数据提取

我们可以看见数据是这样的&#xff0c;第一个是1cc 但是我们shifte就是 这个因为他的数据太大了&#xff0c;导致高位跑后面去了 这个时候&#xff0c;我们右键——convert——dword 这样就可以提取到争取的数据了 比如第一个数据 0x1cc a0xcc b0x1 print(hex((b<<8…

HarmonyOS开发实例:【事件的订阅和发布】

介绍 本示例主要展示了公共事件相关的功能&#xff0c;实现了一个检测用户部分行为的应用。具体而言实现了如下几点功能&#xff1a; 1.通过订阅系统公共事件&#xff0c;实现对用户操作行为&#xff08;亮灭屏、锁屏和解锁屏幕、断联网&#xff09;的监测&#xff1b; 2.通…

vmware安装ubuntu-18.04系统

一、软件下载 百度网盘&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1fK2kygRdSux1Sr1sOKOtJQ 提取码&#xff1a;twsb 二、安装ubuntu系统 1、把ubuntu-18.04的压缩包下载下来&#xff0c;并且解压 2、打开vmware软件&#xff0c;点击文件-打开 3、选择我们刚刚解…

6. Django 深入模板

6. 深入模板 6.1 Django模板引擎 Django内置的模板引擎包含模板上下文(亦可称为模板变量), 标签和过滤器, 各个功能说明如下: ● 模板上下文是以变量的形式写入模板文件里面, 变量值由视图函数或视图类传递所得. ● 标签是对模板上下文进行控制输出, 比如模板上下文的判断和循…

项目7-音乐播放器1+BCrypt加密

1.创建项目 1.1 引入依赖 1.2 yml相关配置 application.yml spring:profiles:active: prod mybatis:mapper-locations: classpath:mapper/**Mapper.xmlconfiguration:map-underscore-to-camel-case: true #配置驼峰⾃动转换log-impl: org.apache.ibatis.logging.stdout.StdO…