ES7中的async 和 await

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()

原文地址:https://www.cnblogs.com/nayek/p/11728872.html

时间: 2024-10-17 03:21:08

ES7中的async 和 await的相关文章

ES7中的async和await

ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的最后,遇到了一个问题,就是如果要对已经获得数据数组进行遍历,并在遍历中继续对每一条数据做异步请求操作,这就构成了一个树状查询. 蠢办法 对于上述问题,我们完全可以用上一章中的垃圾代码来构建一个for循环的嵌套then! 但上一章已经说过,千万不要写出这种垃圾代码,所以如果你的node或者浏览器并不支

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

C# 5.0 中的 Async 和 Await [博主]反骨仔 [本文]http://www.cnblogs.com/liqingwen/p/6069062.html 伴随着 .NET 4.5 和 Visual Studio 2012 的 C# 5.0 ,我们可以使用的新的异步模式,这里涉及到 async 和 await 关键字.有许多不同点的观点,比起之前我们所看到的代码,它的可读性和实用性是否更加突出.我们将通过一个例子,看看它与当前的做法有何“与众不同”. 线性代码与非线性代码 大部分的软

Vue中的async和await的使用

async和await 在Vue中如果某个方法的返回值是Promise对象那么我们可以使用async和await来简化这次Promise操作 注:await只能用在被async修饰的方法中 没有使用async和await login(){ this.$refs.loginFormRef.validate( valid =>{ console.log(valid); if (!valid) return; const result= this.$axios.post("login/login

JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中,因为与服务器通讯是一种比较昂贵的操作,因此比较复杂的业务逻辑往往都放在服务器端,前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据. 但是到了 webapp 风行的时代,前端业务逻辑越来越复杂,往往几个 AJAX 请求之间互有依赖,有些请求依赖前面请求的数据,有些请求需要并行

理解ES7中的async/await

优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async wait的简写,因此可以理解 async 用于声明一个function是异步的,而await用于等待一个异步方法执行完成返回的值(返回值可以是一个Promise对象或普通返回的值).注意:await 只能出现在 async函数中. 1-1 async的作用?首先来理解async函数是怎么处理返回值的,我们以前写代码都是通过return语句返回我们想

async 及 await

ES7 中的 async 及 await就是 Generator 以及 Promise 的语法糖,内部的实现原理还是原来的,只不过是在写法上有所改变,这些实现一些异步任务写起来更像是执行同步任务. 一个函数前加上 async关键字,就将该函数返回一个 Promise,async 直接将返回值使用 Promise.resolve() 进行包裹(与 then 处理效果相同).await 只能配套 async 使用,await 内部实现了 generator,await 就是 generator 加上

【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作,下面就具体看看编译器到底在背后帮我们做了哪些复杂的工作的. 二.同步代码存在的问题 对于同步的代码,大家肯定都不陌生,因为我们平常写的代码大部分都是同步的,然而同步代码却存在一个很严重的问题,例如我们向一个Web服务器发出一个

使用 Async 和 Await 的异步编程

来自:http://msdn.microsoft.com/library/vstudio/hh191443 异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过程中受阻,则整个应用程序必须等待. 在异步过程中,应用程序可继续执行不依赖 Web 资源的其他工作,直至潜在阻止任务完成. 下表显示了异步编程提高响应能力的典型区域. 从 .NET Framework 4.5 和 Windows 运行时中列出的 API 包含

[.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库

此为文章备份,原文出处(我的网站)  [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库 http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/08/ado.net4.5_async_await_20140508.aspx 以前的ADO.NET也能作  "异步"(Async,大陆说法:异步),可以参考 KKBruce 2009/11月的文章: SQLCOMMAND的异步行程