Nuxtでaxiosを使って順に取り出したい

Question

前提・実現したいこと

fugaページでhogesをfetchする際に下記methodを現在実装してます。

methods:{
      fetchhoges () {
        try {
          this.fugas.forEach((fuga) => {
            this.$axios
              .get(`/w/${fuga.id}/hoge/`)
              .then((response) => {
                this.hoges.push(response.data)
              })
              .catch((error) => {
　　　　　　　　　エラー時の処理
            }
.
.
.

}

デバッカーでlogを確認すると、this.$axios以前まではhodeを順番通りにとれてますが
レスポンス取得以降では常に取る順番が不確定です。
この場合、レスポンス以降でhogeを順番通りにresponse.dataをhogesにpushする方法はありませんか？

Answer 1

結果を hoges に push する(先頭から入れる)のではなく、リクエストした順番と同じ場所に入れていくのはどうでしょうか。

this.hoges = []
this.fugas.forEach((fuga, index) => {
    this.$axios
      .get(`/w/${fuga.id}/hoge/`)
      .then((response) => {
        this.hoges[index] = response.data
      })
})

Comments

[golyat96]

結論としましては
backendでfugaとhogeのテーブルを結合し、
fugaのレスポンスにのせてhogeを返す設計に変更し、
fugaのidをキーにして順番通りにhogeを表示させました