async/await 大家肯定都用过,在处理异步操作的时候真的是很方便。
如果有还不熟悉的小伙伴可以看笔者之前的文章:带你理解 async/await
那今天主要讲一些在使用 async/await 时容易忽略和犯错的地方。
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 数据返回之后才会执行。
当看到这段代码时,脑子里应该注意到以下几点:
本篇文章的重点就是通过分析 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~
参考链接:The dangers of async/await
本文首发于公众号:码力全开(codingonfire)
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await
Async实际上是一个封装了自动化执行并返回一个Promise的Generator函数的语法糖。这句话的意思我们可以分为三个部分来解读:首先它有一个自动化执行,Generator函数是依靠不停的调用.net来依次执行的,Async有一个自动化执行的过程
Node.js7.6起, Node.js 搭载了有async函数功能的V8引擎。当Node.js 8于10月31日成为LTS版本后,我们没有理由不使用async函数。接下来,我将简要介绍async函数,以及如何改变我们编写Node.js应用程序的方式。
自2015年11 发布1.7版以来,TypeScript 已支持 async/await 关键字。编译器使用 yield 将异步函数转换为生成器函数。这意味着咱们无法针对 ES3 或 ES5,因为生成器仅在 ES6 中引入的。
有一个图片列表,我想要在图片onload成功之后获取加载成功的图片列表,图片资源加载为异步,我们使用ES7的async await方式实现,多张图片,是用for循环。
Async 和 Awaiit 是 Promise 的扩展,我们知道 JavaScript 是单线程的,使用 Promise 之后可以使异步操作的书写更简洁,而 Async 使 Promise 像同步操作
最近代码写着写着,我突然意识到一个问题——我们既然已经有了 Promise 和 then,为啥还需要 async 和 await?这不是脱裤子放屁吗?
如果让你手写async函数的实现,你是不是会觉得很复杂?这篇文章带你用20行搞定它的核心。经常有人说async函数是generator函数的语法糖,那么到底是怎么样一个糖呢?让我们来一层层的剥开它的糖衣。
async/await是ES7的写法,可以让非同步call back写法看起来像同步的顺序去执行。以下我们new一个Promise的class并return给一个function
决心还是起来把今天白天工作期间反问一个小伙伴的async&await问题。实际上这个问题之前我就一直想写点什么,只是奈何懒的很,一直没有行动
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!