Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js中async和await的基本使用

js中async和await的基本使用

作者头像
小明爱学习
发布于 2020-07-21 06:29:37
发布于 2020-07-21 06:29:37
4.5K0
举报
文章被收录于专栏:smh的技术文章smh的技术文章

async和await是在es7中的内容,不过现在主流浏览器都支持,今天我们就来说说怎么用。

首先你得先了解:es6中的promise,链接:JS中promise的基础用法

async和await是用来处理异步操作的,把异步变为同步的一种方法。

async声明一个function来表示这个异步函数,await用于等待函数中某个异步操作执行完成。

async返回的是一个promise对象,返回值可在promise中的then方法中的第一个回调函数中使用。

await只能用于async的内部,await用于在一个异步操作之前,表示要等待这个异步操作的返回值。

如果await得到不是一个promise对象,那么就不会等待这个异步操作。

如果是一个promise对象,await就会等待promise对象的resolve,得到传入resolve的参数,作为返回值。

依次输出:1,20。

在attract函数中就使用await对象,它会等待edition函数执行完毕,在执行此函数下面的代码,变为同步了。

如果在edition函数或者attract函数中报错了,都将会直接进入then方法的第二个回调函数。

在edition函数中可以直接调用reject进行错误输出,在attract函数则必须是主动抛出代码错误才可以。

注意:当使用了await时,只会阻塞async函数中的代码,外部代码依旧是异步在执行的。

例子:

程序第一肯定会输出1,然后进入attract函数内部,接着输出2,然后看见了await,等待edition函数的返回值,此时在attract函数中的代码是被阻塞的,但是外部不会被阻塞,所以就接着输出3。

然后两秒后,输出edition函数返回的4,最后回到attract函数then方法的第一个回调函数,输出了5。

结果:

代码语言:txt
AI代码解释
复制
                             如无作者授权,请勿转载。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年07月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript中的async/await
async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。
刘亦枫
2020/03/19
2K0
什么是Async await,和Promise有什么区别
总结:Async/awati 简单好用,是大势,肯定得学,而async的使用绕不开Promise,所以Promise是必会的。
子夜星辰
2022/11/15
1.5K0
async/await
async是ES7的与异步操作有关的关键字,其返回一个Promise对象,await操作符用于等待一个Promise对象,它只能在异步函数async function内部使用。
WindRunnerMax
2020/08/27
3480
ES6新增语法(七)——async...await
async的意思是“异步”,顾名思义就是有关异步操作的关键字,async 是 ES7 才有的,与我们之前说的Promise、Generator有很大的关联。
呆呆
2021/09/29
5490
async/await剖析
JavaScript是单线程的,为了避免同步阻塞可能会带来的一些负面影响,引入了异步非阻塞机制,而对于异步执行的解决方案从最早的回调函数,到ES6的Promise对象以及Generator函数,每次都有所改进,但是却又美中不足,他们都有额外的复杂性,都需要理解抽象的底层运行机制,直到在ES7中引入了async/await,他可以简化使用多个Promise时的同步行为,在编程的时候甚至都不需要关心这个操作是否为异步操作。
WindRunnerMax
2020/08/27
3390
JS中的 async 和 await 使用技巧
async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。 await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,它们会被自动转成立即 resolved 的 Promise 对象)。
青梅煮码
2023/02/18
1.9K0
详解ES6中的async/await
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数
用户6973020
2020/05/02
3K0
谈谈async await的理解!
不过比起Promise之后用then方法来执行相关异步操作,async/await则把异步操作变得更像传统函数操作。
前端老道
2022/03/29
4880
async/await详解
async/await是ES20717引入的,主要是简化Promise调用操作,实现了以异步操作像同步的方式去执行,async外部是异步执行的,同步是await的作用。
不叫猫先生
2023/11/25
2.7K0
node.js的async和await
ES2017 标准引入了 async 函数,使得异步操作变得更加方便,async其实本质是Generator函数的语法糖
雪山飞猪
2019/08/29
1.8K0
async/await 原理及执行顺序分析
之前写了篇文章《这一次,彻底理解Promise原理》,剖析了Promise的相关原理。我们都知道,Promise解决了回调地狱的问题,但是如果遇到复杂的业务,代码里面会包含大量的 then 函数,使得代码依然不是太容易阅读。
桃翁
2019/11/08
1.9K0
优雅的异步编程版本答案async和await解析
一比较就会发现,async 函数就是将 Generator 函数的星号(*)替换成 async,将 yield 替换成 await,仅此而已。
henu_Newxc03
2021/12/26
5240
Promise 和 Async/Await的区别
如果你正在阅读这篇文章,你可能已经理解了 promise 和 async/await 在执行上下文中的不同之处。
前端小智@大迁世界
2024/02/12
4150
Promise 和 Async/Await的区别
Promise与Async/Await:异步编程的艺术
一个Promise对象代表了一个现在、将来或永远可能可用,也可能不可用的值。它有三种状态:pending(进行中)、fulfilled(已成功)或rejected(已失败)。
空白诗
2024/06/14
2180
JavaScript中的async/await的用法和理解
昨天更新的是“JavaScript中的Promise使用详解”,其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出。今天就说一说“JavaScript中的async/await的用法和理解”
青年码农
2020/11/11
1.3K0
JavaScript中的async/await的用法和理解
async和await
先从字面意思来理解。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
全栈程序员站长
2022/09/15
1.1K0
async和await
理解 JavaScript 的 async/await
async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。 另外还有一个很有意思的语法规定,await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问,如果 await 只能出现在 async 函数中,那这个 async 函数应该怎么调用? 如果需要通过 awai
IT架构圈
2018/06/01
9990
JavaScript 引擎是如何实现 async/await 的
我们都知道Promise 能很好地解决回调地狱的问题,但是这种方式充满了 Promise 的 then() 方法,如果处理流程比较复杂的话,那么整段代码将充斥着 then,语义化不明显,代码不能很好地表示执行流程,使用 promise.then 也是相当复杂,虽然整个请求流程已经线性化了,但是代码里面包含了大量的 then 函数,使得代码依然不是太容易阅读。基于这个原因,ES7 引入了 async/await,这是 JavaScript 异步编程的一个重大改进,提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力,并且使得代码逻辑更加清晰。
PHP开发工程师
2022/03/28
1.2K0
JavaScript 引擎是如何实现 async/await 的
解锁Async:异步编程的神奇密码
在当今的编程世界中,异步编程已然成为提升程序性能与响应能力的关键技术,而async则是其中的核心要素。无论是在前端处理复杂的用户交互,还是后端应对高并发的网络请求,async都发挥着不可或缺的作用。它就像是编程世界里的 “魔法钥匙”,能让程序在等待 I/O 操作、网络请求等耗时任务的过程中,不被阻塞,继续执行其他重要的任务,从而大大提高了程序的运行效率和用户体验。
用户11396661
2025/03/15
520
不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)
在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 当代码执行到第二行时,程序便陷入了等待,直到请
用户1608022
2018/04/11
3K0
不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)
相关推荐
JavaScript中的async/await
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档