你可能忽略的 async/await 问题

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~

参考连接

• The dangers of async/await

---

本文首发于公众号：码力全开（codingonfire）

本文随意转载哈，注明原文连接便可，公号文章转载联系我开白名单就好~