本文摘自PHP中文网,作者coldplay.xixi,侵删。
JavaScript里的await/async的作用和用法
分享:
await/async是ES7最重要特性之一,它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入,但很快就到来,目前已经在 ES-NextStage4阶段。
直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据
老朋友 Ajax
传统的写法,无需解释
1 2 3 4 5 6 7 8 9 10 11 12 |
|
不算新的朋友 Promise
Promise 已经被提及已久了,也是 ES6 的一部分。Promise 能消除 callback hell 带来的厄运金字塔,相比起来代码更清晰了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
当然使用 Promise.all 可以更简洁
1 2 3 4 5 6 7 8 |
|
强劲的新朋友 Generators
Generators 也是 ES6 一个新的特性,能够 暂停/执行 代码。yield 表示暂停,iterator.next 表示执行下一步,如果你不了解 Generators 也没关系,可以忽略它直接学习 await/async。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
与 Fetch API 结合使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
按数组顺序执行
1 2 3 4 5 6 7 8 |
|
再次结合 Fetch
1 2 3 4 5 6 7 8 |
|
使用 await/async 用同步的思维去解决异步的代码,感觉非常酷非常爽!
推荐教程:《js基础教程》
以上就是详解JavaScript里的await/async的作用和用法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中settimeout()和setinterval()两个定时器的区别
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者