当前位置: 首页 > news >正文

async与await异步编程

ECMA2017中新加入了两个关键字async与await

简单来说它们是基于promise之上的的语法糖,可以让异步操作更加地简单明了

首先我们需要用async关键字,将函数标记为异步函数

async function f() {}
f()

异步函数就是指:返回值为promise对象的函数
比如之前用到的fetch()就是一个异步函数,返回的是promise

在异步函数中,我们可以调用其他的异步函数,不过我们不再需要使用then,而是使用一个await。

await会等待Promise完成之后直接返回最终结果

所以这里的response已经是一个服务器返回的响应数据了

async function f() {const response = await fetch("http://....")
}
f()

虽然await看上去会暂停函数的执行,但在等待的过程中,js同样可以处理其他的任务

这是因为await底层是基于promise与事件循环(event loop)机制实现的

await使用时的陷阱:

1、第一个陷阱
比如:我们分别去await这两个异步操作

async function f() {const a = fetch("http://..../post/1")const b = fetch("http://..../post/2")
}
f()

虽然不存在逻辑错误
但这样会打破这两个fetch()操作的并行
因为我们会等到第一个任务执行完成之后才开始执行第二个任务

这里更高效的方法是将所有的Promise用Promise.all组合起来,然后再去await:

修改之后的执行效率会直接提升一倍

async function f() {const promiseA = fetch("http://..../post/1")const promiseB = fetch("http://..../post/2")const [a, b] = await Promise.all([promiseA,promiseB])
}
f()

2、第二个陷阱

如果我们需要在循环中执行异步操作,是不能够直接调用forEach或者map这一类方法的,尽管我们在回调函数中写了await也不行。

因为这里的forEach会立即返回,它并不会等到所有的异步操作都执行完毕

async function f() {[1,2,3].forEach(async (i) => {await someAsyncOperation();})console.log("done")}
f()

如果我们希望等待循环中的异步操作都一一完成之后才继续执行

我们应当使用传统的for循环

async function f() {for( let i of [1,2,3]){await someAsyncOperation();}console.log("done")
}
f()

如果我们希望所有的程序并发执行,一种更炫酷的写法就是使用for await

这里的for循环依然会等到所有的异步操作都完成之后才会继续向后执行

在这里插入图片描述
3、第三个陷阱

我们不能在全局或者普通函数中直接使用await关键字

await只能用在异步函数(async function)中

如果我们想要在最外层中使用await,那么需要先定义一个异步函数:
在这里插入图片描述
使用await async可以让我们写出更清晰,更容易理解的异步代码

参考视频教程:
https://www.bilibili.com/video/BV1WP4y187Tu/?spm_id_from=333.337.search-card.all.click&vd_source=ee0c6018997dd78957dfe36225950357

http://www.lryc.cn/news/42175.html

相关文章:

  • 移动应用架构设计:如何转变开发流程
  • NX二次开发 图层函数总结
  • windows微服务部署
  • Java四种内部类(看这一篇就够了)
  • 蓝桥杯刷题第二十天
  • 如何通过命令行查看CentOS版本信息和linux系统信息
  • oracle查询表空间大小以及每个表所占空间的大小
  • C语言通讯录应用程序:从设计到实现
  • 银河麒麟v10sp2安装nginx
  • 华为笔试题OD
  • Win10+Anconda安装.whl文件到指定环境——以pycocotools为例
  • 全自动托盘四向穿梭车|拥有输送系统提升机AGV的托盘四向穿梭车立体库的软硬件配置系统
  • 【Linux】进程概念二
  • 如何用C语言实现渣男通讯录
  • 【从零开始的C语言】操作符详解
  • 黑马在线教育数仓实战1
  • python中pandas模块数据处理小案例
  • 从 X 入门Pytorch——Tensor的自动微分、计算图,常见的with torch.no_grad()机制
  • 三十七、实战演练之接口自动化平台的文件上传
  • 菜鸟刷题Day1
  • cjson文件格式介绍
  • 【Nginx二】——Nginx常用命令 配置文件
  • 3月最新!AIGC公司生态地图;开发者实用ChatGPT工具清单;上手必会的SD绘图教程;字幕组全自动化流程大公开 | ShowMeAI日报
  • python - 递归函数
  • ring_log环形日志-6M缓冲区_proc接口
  • Linux内核进程管理几种CPU调度策略
  • SpringBoot整合Flink(施耐德PLC物联网信息采集)
  • DFS(深度优先搜索)和BFS(宽度优先搜索)
  • Redis缓存穿透、击穿、雪崩问题及解决方法
  • HAL库 STM32 串口通信