NuxtのasyncDataで複数のHTTPリクエストを扱う

asyncDataに限らないんだけど await Promise.all() 使うとキレイに書けるよねって話。
TypeScript x ES6 な感じ。

prefetch的な処理をキレイにかけるNuxtは最高だなと思います

FooBar.vue

<script lang="ts">
import Vue from "vue";
import Component from "nuxt-class-component";

import Foo from "~/Foo";
import Bar from "~/Bar";

@Component({
  async asyncData({ app, params }) {
    const id = _.get(params, "id");
    // 2つのHTTPのレスポンスを受けてからページがレンダリングされる
    const [foo, bar] = await Promise.all([
      app.$axios.get(`/foo/${id}`),
      app.$axios.get(`/bar/foo/${id}`),
    ]);
    return { foo, bar };
  },
})
export default class extends Vue {
  foo: Foo;
  bar: Bar;
};
</script>