1 分钟读完《10 分钟学会 JavaScript 的 AsyncAwait》
以前我们使用 callback。
后来我们使用 Promise。
现在我们使用 Async/Await。
什么是 Async/Await?
Async – 定义异步函数(async function someName(){…})
- 自动把函数转换为 Promise
- 当调用异步函数时,函数返回值会被 resolve 处理
- 异步函数内部可以使用 await
Await – 暂停异步函数的执行 (var result = await someAsyncCall();)
- 当使用在 Promise 前面时,await 等待 Promise 完成,并返回 Promise 的结果
- await 只能和 Promise 一起使用,不能和 callback 一起使用
- await 只能用在 async 函数中
Async/Await 是否会取代 Promise
不会。
- Async/Await 底层依然使用了 Promise。
- 多个异步函数同时执行时,需要借助 Promise.all
async function getABC() { let A = await getValueA(); // getValueA 花费 2 秒 let B = await getValueB(); // getValueA 花费 4 秒 let C = await getValueC(); // getValueA 花费 3 秒 return A*B*C; }
每次遇到 await 关键字时,Promise 都会停下在,一直到运行结束,所以总共花费是 2+4+3 = 9 秒。await 把异步变成了同步。
async function getABC() { // Promise.all() 允许同时执行所有的异步函数 let results = await Promise.all([ getValueA, getValueB, getValueC ]); return results.reduce((total,value) => total * value); }
函数总耗时为 4 秒(getValueB 的耗时)。
Async/Await 的错误处理
在 Async/Await 语法中,我们可以使用 try/catch 进行错误处理。在 Promise 中的 .catch() 分支会进入 catch 语句。
阅读原文:JavaScript Async/Await Explained in 10 Minutes
讨论地址:10 分钟学会 JavaScript 的 Async/Await
如果你想参与讨论,请点击这里
相关推荐
-
使用 TypeScript 开发 HapiJS 应用 javascript/jquery
2019-5-25
-
一文快速解读ES6新特性 javascript/jquery
2019-9-1
-
JavaScript 引擎「V8」发布 8.0 版本,内存占用量大幅下降 javascript/jquery
2020-5-28
-
判断DOM元素是否出现再浏览器窗口中 javascript/jquery
2018-12-8
-
前端面试题汇总大全(含答案)– 持续更新 javascript/jquery
2019-10-3
-
深入了解 JavaScript 内存泄露 javascript/jquery
2019-9-1
-
我的博客开发(019) javascript/jquery
2020-5-27
-
VUE2.0学习总结 javascript/jquery
2020-6-9
-
【资源集合】 ES6 元编程(Proxy & Reflect & Symbol) javascript/jquery
2018-9-3
-
一次搞定闭包和this javascript/jquery
2018-4-9