当前位置: 首页 > 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

相关文章:

  • MyBatisPlus+SpringBoot实现乐观锁功能
  • 【Vue全家桶】带你全面了解通过Vue CLI初始化Vue项目
  • CSS 属性计算过程
  • 一文了解Jackson注解@JsonFormat及失效解决
  • 全自动托盘四向穿梭车|拥有输送系统提升机AGV的托盘四向穿梭车立体库的软硬件配置系统
  • “你要多弄弄算法”
  • 【Android -- 开发工具】Xshell 6 安装和使用教程
  • Tomcat And Servlet (1)
  • C++ 学习笔记(十)(继承、抽象篇)
  • 【蓝桥杯集训·每日一题】 AcWing 3996. 涂色
  • 【Linux】基础IO(一) :文件描述符,文件流指针,重定向
  • 网络安全文章汇总导航(持续更新)
  • 菜鸟刷题Day1
  • C语言通讯录应用程序:从设计到实现
  • python常见算法(chatgpt算法实现)
  • #Java异常处理
  • ES2017异步函数现已正式可用
  • es6
  • java 多线程基础, 我觉得还是有必要看看的
  • Mysql数据库的条件查询语句
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • Vim Clutch | 面向脚踏板编程……
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 从重复到重用
  • 高程读书笔记 第六章 面向对象程序设计
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 聚簇索引和非聚簇索引
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 前端之React实战:创建跨平台的项目架构
  • 入门级的git使用指北
  • 我与Jetbrains的这些年
  • 优化 Vue 项目编译文件大小
  • 正则表达式
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • (1)(1.11) SiK Radio v2(一)
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (Oracle)SQL优化技巧(一):分页查询
  • (补)B+树一些思想
  • (定时器/计数器)中断系统(详解与使用)
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • (三)模仿学习-Action数据的模仿
  • (转)jdk与jre的区别
  • .NET MAUI学习笔记——2.构建第一个程序_初级篇
  • .NET4.0并行计算技术基础(1)
  • @ModelAttribute使用详解
  • [ JavaScript ] JSON方法
  • [Android Studio 权威教程]断点调试和高级调试
  • [BZOJ 3282] Tree 【LCT】
  • [flink总结]什么是flink背压 ,有什么危害? 如何解决flink背压?flink如何保证端到端一致性?
  • [JavaEE]线程的状态与安全