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

[JS入门到进阶] 7条关于 async await 的使用口诀,新学 async await?背10遍,以后要考!快收藏

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

async await 使用口诀

  1. async写函数前面,await写函数里面。
  2. 函数没有async,一定也没await。
  3. 函数不执行await,也可以有async。
  4. 函数没有await,最好删掉async。
  5. async函数直接return await,请把async await都丢掉。
  6. 调用async函数却不await,你就只有破柔蜜丝。
  7. 写了await又写then,指定要被老板炒;await和then不混用,我们还是好基友。

案例

1. async写函数前面,await写函数里面。

用function定义:

async function f() {
  await fetch('/');
}

用箭头函数定义:

const f = async () => {
  await fetch('/');
};

这个函数逻辑很简单,就是发送了个请求给这个/的地址,而/这个地址就表示当前的域名,即:https://juejin.cn/。理论上,它会把掘金首页的html文件给下载过来。

2. 函数没有async,一定也没await。

如果一个函数的前面没有写async,那么它里面一定不要写await噢,不然会报错的!不信你看:

1.png

3. 函数不执行await,也可以有async。

如果一个函数里面,await逻辑可能不会被执行,那么函数也是可以有async标识的!你能明白2和3的区别嘛?

它不会报错的,不信你看:

2.png

4. 函数没有await,最好删掉async。

如果一个函数里面没有await调用,那么你完全可以删掉async。此时,对函数的调用:await f1()可以直接改为f1()

3.png

5. async函数直接return await,请把async await都丢掉。

二者最终效果是一样的哦,但是丢掉后就少了一层async await,看起来更方便了呢。

4.png

6. 调用async函数却不await,你就只有破柔蜜丝。

调用async函数却不await,你就只有Promise

5.png

7. 写了await又写then,指定要被老板炒;await和then不混用,我们还是好基友。

被老板炒鱿鱼的写法:

const data = await fetch('https://api.juejin.cn/interact_api/v1/pin_tab_lead?aid=2608&uuid=')
  .then(r => r.json());
console.log(data);

6.png

好的写法:

const res = await fetch('https://api.juejin.cn/interact_api/v1/pin_tab_lead?aid=2608&uuid=');
const data = await res.json();
console.log(data);

7.png

写在最后

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

相关文章:

  • BeanFactory和ApplicationContext有什么区别
  • Linux故障排查思路
  • 【@EnableAspectJAutoProxy为符合切点的目标 bean 自动创建代理】
  • 【多式联运】基于帝国企鹅算法+遗传算法+粒子群算法求解不确定多式联运路径优化问题【含Matlab源码 2073期】
  • 2022年0902Maven的继承和利用Idea创建Maven工程的内容<第五课>
  • SQL 3小时快速入门 学习b站的笔记
  • jQuery表单属性过滤器:过滤<input>标签、<select>标签
  • unity官方教程 -- Hi Shader学习笔记 Chapter 1
  • 什么是优化
  • 基于Springboot+vue的论坛管理系统 elementui
  • 大量if else的优化方案
  • 牛客 NC24755 [USACO 2010 Dec S]Apple Delivery
  • Git做版本管理及CHANGELOG
  • python经典编程100例(1)
  • GO语言 | go work 神一般的管理 多个module没烦恼
  • (三)从jvm层面了解线程的启动和停止
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • 【翻译】babel对TC39装饰器草案的实现
  • CentOS从零开始部署Nodejs项目
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • java8 Stream Pipelines 浅析
  • Java超时控制的实现
  • js对象的深浅拷贝
  • Mac转Windows的拯救指南
  • mockjs让前端开发独立于后端
  • PhantomJS 安装
  • Redash本地开发环境搭建
  • Spring核心 Bean的高级装配
  • Zepto.js源码学习之二
  • 订阅Forge Viewer所有的事件
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 和 || 运算
  • 京东美团研发面经
  • 聚簇索引和非聚簇索引
  • 物联网链路协议
  • 赢得Docker挑战最佳实践
  • ​2021半年盘点,不想你错过的重磅新书
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • #{}和${}的区别?
  • #define MODIFY_REG(REG, CLEARMASK, SETMASK)
  • (4)(4.6) Triducer
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (k8s中)docker netty OOM问题记录
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (力扣)1314.矩阵区域和
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (转)Scala的“=”符号简介
  • (转)用.Net的File控件上传文件的解决方案
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .net core 3.0 linux,.NET Core 3.0 的新增功能
  • .NET Core 版本不支持的问题
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution