async 和 await

一个函数如果加上 async ,那么该函数就会返回一个 Promise

async function test() {
return "1"
}
console.log(test())
// -> Promise {<resolved>: "1"}

async 就是将函数返回值使用 Promise.resolve() 包裹了下,和 then 中处理返回值一样,并且 await 只能配套 async 使用。

async function test() {
let value = await sleep()
}

async 和 await 可以说是异步终极解决方案了,相比直接使用 Promise 来说,优势在于处理 then 的调用链,能够更清晰准确的写出代码,毕竟写一大堆 then 也很恶心,并且也能优雅地解决回调地狱问题。

当然也存在一些缺点,因为 await 将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

async function test() {
// 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
// 如果有依赖性的话,其实就是解决回调地狱的例子了
await fetch(url)
await fetch(url1)
await fetch(url2)
}

看一个使用 await 的例子:

let a = 0
let b = async () => {
a = a + await 10
console.log('2', a)
}
b()
a++
console.log('1', a) //先输出 ‘1’, 1
//在输出 ‘2’, 10
  • 首先函数 b 先执行,在执行到 await 10 之前变量 a 还是 0,因为 await 内部实现了 generator ,generator 会保留堆栈中东西,所以这时候 a = 0 被保存了下来
  • 因为 await 是异步操作,后来的表达式不返回 Promise 的话,就会包装成 Promise.reslove(返回值),然后会去执行函数外的同步代码
  • 同步代码 a++ 与打印 a 执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候 a = 0 + 10

上述解释中提到了 await 内部实现了 generator,其实 await 就是 generator 加上 Promise 的语法糖,且内部实现了自动执行 generator

代码分析题

function wait() {
return new Promise(resolve =>
setTimeout(resolve, 1000)
)
} async function main() {
console.time();
const x = wait();
const y = wait();
const z = wait();
await x;
await y;
await z;
console.timeEnd();
}
main();

答案: 输出耗时: 1秒多一点点。

原因: 3个wait函数在赋值的时候就已经开始执行了。

稍微改造一下就可以得到3 * 1000 ms以上的结果

function wait () {
return new Promise(
resolve => setTimeout(resolve, 1000)
)
} async function main () {
console.time()
const x = await wait()
const y = await wait()
const z = await wait()
console.timeEnd()
} main()

ES7中的async 和 await的更多相关文章

  1. ES7中的async和await

    ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的 ...

  2. 理解ES7中的async/await

    理解ES7中的async/await 优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async w ...

  3. 在Node中使用ES7新特征——async、await

    async与await两个关键字是在ES7中添加的新特征,旨在更加直观的书写异步函数,避免出现callback hell. callback hell是什么? readFileContents(&qu ...

  4. [译] C# 5.0 中的 Async 和 Await (整理中...)

    C# 5.0 中的 Async 和 Await [博主]反骨仔 [本文]http://www.cnblogs.com/liqingwen/p/6069062.html 伴随着 .NET 4.5 和 V ...

  5. 在MVC中使用async和await的说明

    首先,在mvc中如果要用纯异步请不要使用async和await,可以直接使用Task.Run. 其次,在mvc中使用async和await可以让系统开新线程处理Task的代码,同时不必等Task执行结 ...

  6. C# 中的Async 和 Await 的用法详解

    众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...

  7. async和await的使用总结 ~ 竟然一直用错了c#中的async和await的使用。。

    对于c#中的async和await的使用,没想到我一直竟然都有一个错误.. ..还是总结太少,这里记录下. 这里以做早餐为例 流程如下: 倒一杯咖啡. 加热平底锅,然后煎两个鸡蛋. 煎三片培根. 烤两 ...

  8. ES2017 中的 Async 和 Await

    ES2017 在 6 月最终敲定了,随之而来的是广泛的支持了我最喜欢的最喜欢的JavaScript功能: async(异步) 函数.如果你也曾为异步 Javascript 而头疼,那么这个就是为你设计 ...

  9. .NET中的async和await关键字使用及Task异步调用实例

    其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以 ...

随机推荐

  1. asp.net以流导出Excel

    废话不多说,直接上代码 这是点击导出的事件函数,因为我是从前端获取的Table的json数据,所以需要转换一下,大家直接用查询出来的DataTable即可 protected void bt_expo ...

  2. PHP文件上传和下载

    第 1 章 文件上传 1.1 客户端上传设置 在 B/S 程序中文件上传已经成为一个常用功能.其目的是客户可以通过浏览器 (Browser) 将文件上传到服务器(Server)上的指定目录. 网络上常 ...

  3. Flutter高仿微信项目开源-具即时通讯IM功能

    项目地址:https://github.com/fluttercandies/wechat_flutter wechat_flutter  Flutter版本微信 效果图: 下载体验(Android) ...

  4. Linux中shell基础、重定向、管道符、环境变量

    1.什么是shell Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口(命令解释器).它接收用户输入的命令并把它送入内核去执行.起着协调用户与系统的一致性和在用户与系统之间进行交互的 ...

  5. 【Android - 进阶】之PopupWindow的使用

    创建一个类继承自PopupWindow,编写自定义的PopupWindow类.示例代码如下: import android.app.Activity; import android.graphics. ...

  6. Docker harbor 安装和基础操作

    目录 简介 离线安装 配置文件 安装 查看 访问测试 及 简单操作 创建一个用户 创建一个测试仓库 创建测试仓库 测试上传和下载镜像 上传 下载镜像测试 简介 Docker容器应用的开发和运行离不开可 ...

  7. ios webp转换jpg

    在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...

  8. Authentication 接口验证访问 (C#)

    private HttpClient _httpClient = new HttpClient(); private string PostToOwner(CarOwnerCoupon postDat ...

  9. Android DataBinding不能自动生成ViewDataBinding类的解决方法

    如果Build.gradle和Layout文件配置正确,仍无法生成ViewDataBinding类. 经测试,Gradle的sync无效,clean project无效,invalidate and ...

  10. java访问数据库被拒绝,不能连接数据库ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    错误原因:mysql数据库只允许本地ip访问: 解决方法:修改mysql表设置所有ip都可以访问: 登录数据库 使用以下命令: use mysql; grant all privileges on * ...