先久闻async、await,今日终于天时、地利、人和来一睹芳容。

先来看一列

代码片段：

async function test() {const response = await new Promise(resolve => {setTimeout(() => {resolve("test");}, 1000);});console.log(response);
}
test();

输出结果：

test

疑问：response居然拿到了promise的resolve返回值"test"?

对比例子一：

代码片段：

function test() {const response = new Promise(resolve => {setTimeout(() => {resolve("test");}, 1000);});console.log(response);
}
test();

输出结果：

Promise {<pending>}

结果分析：new Promise返回Promise对象赋值于response，既然如此为何文章开始列子使用async、await便可拿到promise对象的resolve返回值？那当然是因为…我也不知道，以后知道了再补充。

对比例子二：

代码片段：

async function test() {console.time('asyncStart')const response = await new Promise(resolve => {setTimeout(() => {resolve("test");}, 1000);});console.timeEnd('asyncStart')console.log(response);
}
test();

输出结果：

asyncStart: 1000.716064453125ms
test

结果分析：await new Promise…代码片段执行时长将近一秒,极像const response = “test”。亦由此可知async、await为何像同步写法。

传闻koa使用async、await解决了express回调地狱，既然如此咱们便比较比较。

代码片段：

//回调
function start(a,cb){new Promise(resolve=>{setTimeout(()=>{resolve(a)},1000)}).then((result)=>{new Promise(resolve=>{setTimeout(()=>{resolve(result)},1000)}).then((res)=>{cb(res);})})
}
start(1,function(res){console.log(res)})// async、await
async function test(b,cb){var result = await new Promise(resolve=>{setTimeout(()=>{resolve(b)},1000)})var res = await new Promise(resolve=>{setTimeout(()=>{resolve(result)},1000)})cb(res)
}
test(2,function(res){console.log(res)})

输出结果：

1
2

结果分析：不用多说，自己感受，这仅仅是两层而已。
再来感受一段有意思的
代码片段：

async function test(str) {return await new Promise(resolve => {setTimeout(() => {resolve(str)}, 1000);})
}async function a(){console.time('a')console.log(await test('a--str1'));console.log(await test('a--str2'));console.timeEnd('a')
}
a();async function b(){console.time('b')var b1 = test('b--str1');var b2 = test('b--str2')console.log(await b1);console.log(await b2);console.timeEnd('b')
}
b();

输出结果：

a--str1
b--str1
b--str2
b: 1004.19384765625ms
a--str2
a: 2004.85498046875ms

结果分析：await只等待所对应async的异步

ES7之async、await相关推荐

让IE9及以上兼容es6，Promise, 及es7的async await
在完成下面A和B两步后,页面内嵌JS或者引入自己外部JS,script标签的type属性需要设置为text/babel <!DOCTYPE html> <html><he ...
解决小程序不能使用ES7语法async/await。并演示此语法
小汪又来了, 今天小汪来写一篇关于小程序使用 ES7语法中的 async和await,如果能帮到小伙伴,小伙伴不要忘了点点大拇指哦! 了解一下:es7的 async 号称是解决回调地狱的最终方案使用 ...
事件循环机制 + ES7：Async/Await（基于generator原理实现）附详细示例分析
文章目录一.事件循环任务队列宏任务和微任务循环机制简单示例二.Async/Await 1. async 2. await 3. 原理 4. 示例(红字分析为关键) 一.事件循环任务队列 ...
async function_掌握 Async/Await
摘要: 还不用Async/Await就OUT了.. 原文:掌握 Async/Await 作者:Jartto Fundebug经授权转载,版权归原作者所有. 前端工程师肯定都经历过 JS 回调链狱的痛苦 ...
⼩程序中⽀持es7的async语法
⼩程序中⽀持es7的async语法 es7的 async 号称是解决回调的最终⽅案 1. 在⼩程序的开发⼯具中,勾选 es6转es5语法 2. 下载 facebook的regenerator库中的 r ...
Node.js Async Await in ES7
原文 http://stackabuse.com/node-js-async-await-in-es7/ One of the most exciting features coming to Jav ...
【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.12 前端发请求,调用后端接口,来获取特定格式的数 ...
ES7之async，await
ES7之async,await 一.基本用法 async,await函数是ES7中引入的语法.与Generator,Promise有很大的关系. async 使用async修饰的函数,会返回一个Pro ...
写一个符合 Promises/A+ 规范并可配合 ES7 async/await 使用的 Promise
原文地址从历史的进程来看,Javascript 异步操作的基本单位已经从 callback 转换到 Promise.除了在特殊场景使用 stream,RxJs 等更加抽象和高级的异步数据获取和操作流 ...
8张图让你一步步看清 async/await 和 promise 的执行顺序
2019独角兽企业重金招聘Python工程师标准>>> **摘要:**面试必问原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序作者:ziwei3 ...

ES7之async、await

先久闻async、await,今日终于天时、地利、人和来一睹芳容。

先来看一列

对比例子一：

对比例子二：

传闻koa使用async、await解决了express回调地狱，既然如此咱们便比较比较。

ES7之async、await相关推荐

最新文章

热门文章