你可能忽略的 async/await 问题
2020/2/17 5:01:08
本文主要是介绍你可能忽略的 async/await 问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
async/await
大家肯定都用过,在处理异步操作的时候真的是很方便。
如果有还不熟悉的小伙伴可以看笔者之前的文章:
那今天主要讲一些在使用 async/await
时容易忽略和犯错的地方。
一个例子
下面是一个常见的 Vue 代码片段:
async initStore(query) { await this.getConfig(); await this.getUser(); await this.checkRussianContext(query); await this.getBasket(this.$store.state.config.selectedCurrency), await this.$store.dispatch('options/fetchOptions', { basket : this.$store.state.basket, }); },
上面的代码中,每一行都会 等待上一行的结果返回后才会执行。比如其中的 getUser
会等待 getConfig
数据返回之后才会执行。
当看到这段代码时,脑子里应该注意到以下几点:
- 如果某一行的执行不需要上面一行的数据怎么办?为什么阻塞代码使整个应用程序变慢呢?
- 我们可不可以让所有不相关的方法一起执行?比如使用
Promise.all
? - 能否让相关的方法使用
then
进行链式调用来避免阻塞剩余代码?
本篇文章的重点就是通过分析 async/await
可能引发的问题,帮你找到 代码的坏味道。
无关的请求请并行执行
让我们来看一些具体的数据下的情况。
下面是示例代码:
const getUserData = async () => { // 获取一张随机的狗狗图片作为头像 const res = await fetch('https://dog.ceo/api/breeds/image/random') const { message } = await res.json() // 获取随机生成的用户信息 const user = await fetch('https://randomuser.me/api/') const { results } = await user.json() // ... }
上面的代码在 fast 3G
(使用 Chrome 开发者工具)下执行 100 次,平均执行时间为 1231.10ms
但是很显然,第二个请求并不需要第一个请求的结果,所以我们修改成以下代码并执行 100 次:
const getUserDataFaster = async () => { // 两个请求并行执行 const [res, user] = await Promise.all([ fetch('https://dog.ceo/api/breeds/image/random'), fetch('https://randomuser.me/api/') ]) const [{ message }, { results }] = await Promise.all([res.json(), user.json()]) // ... }
我们得到的平均执行时间为 612.50ms,几乎节省了一半时间。
划重点:尽可能地把查询请求并行执行。
可以用这个 codepen 中的代码体验
无关的代码你不必等
再来例子:
async initStore(query) { await Promise.all([ this.getConfig(), this.getUser(), this.checkRussianContext(query) ]) await this.getBasket(this.$store.state.config.selectedCurrency), await this.$store.dispatch('options/fetchOptions', { basket : this.$store.state.basket, }); await initBooking() },
前面的 3 个请求是并行执行的,而下一段代码依赖了前面获取的数据,所以需要在其后执行,但是你有没有发现其中的问题?
initBooking
这个小可怜只能等到 getBasket
和 fetchOptions
完成之后才能执行,尽管它不需要这两个方法的任何数据。
一个简单的解决办法是将 await
换成 .then
来使用:
关于这个用法可以看开头的另一篇文章
async initStore(query) { await Promise.all([ this.getConfig(), this.getUser(), this.checkRussianContext(query) ]) this.getBasket(this.$store.state.config.selectedCurrency).then(async () => { await this.$store.dispatch('options/fetchOptions', { basket : this.$store.state.basket, }); }) await initBooking() },
这样的话,getBasket
和 initBooking
都可以并行执行了。
结论
async/await
是 JavaScript 中的一个非常棒的特性,我们在享受它们便利写法的同时,也要清楚它们可能引发的问题。有机会审查一下你的代码,看有没有可以并行运行的代码块吧~
Thanks for reading~
参考链接
本文首发于公众号:码力全开(codingonfire)
本文随意转载哈,注明原文链接即可,公号文章转载联系我开白名单就好~
这篇关于你可能忽略的 async/await 问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程