Vue js axiosでkeyのjson取得後にもう一度axios getをしたい

前提・実現したいこと

前提条件:keyall.jsonで{"result":['key1', 'key2', 'key3']}のjsonを返す
api/key/detail.jsonでcallback({"type":"sound")};keyの詳細が返ってくる

上記のようなkey全ての詳細情報したいと思い、Vue.jsで実装したのですが、

this.result_keysのハッシュの中身が詳細データがなく空で返ってきてしまいます。
どのようにしたら、詳細情報を取得でしますか？
ご教示お願い致します。

this.keysの時点で出力してみたら、key一覧は取得できていました。

発生している問題・エラーメッセージ

[ {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {} ]

該当のソースコード

<template>
  <div>
    <h1>MainPage です</h1>
    <table>
      <tr>
        {{ this.result_keys }}
      </tr>
    </table>
    <router-link to="/About">Go to AboutPage</router-link>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'main-page',
    data: () => ({
      keys: null,
      result_keys: [],
    }),
    mounted() {
      axios.get('keyall.json').then((response) => {
        this.keys = response.data.result;
        this.result_keys = this.keys.map(key => axios.get(`api/${key}/detail.json`).then(result => result));
      });
    },
  };
</script>

<style>
</style>

補足情報（FW/ツールのバージョンなど）

Electron-vue

行動規範の内容に同意します

回答1件

ベストアンサー

やりたいことは分かるのですが、Array.prototype.map()はあくまで配列を生成するだけですので非同期処理を入れても思ったようには処理してくれません。
なので、取得後の処理だけ抜いてキューにしてしまいPromise.all()で処理されてはどうでしょうか。

js
1mounted() {
2  axios.get('keyall.json').then((response) => {
3    this.keys = response.data.result;
4    const que = this.keys.map(key => axios.get(`api/${key}/detail.json`));
5    Promise.all(que).then(response => {
6      this.result_keys = response
7    })
8  });
9}

余談ですがasync/awaitを使うとより分かりやすいですね

js
1async mounted() {
2  this.keys = await axios.get('keyall.json').then(response => response.data.result);
3  const que = this.keys.map(key => axios.get(`api/${key}/detail.json`));
4  this.result_keys = await Promise.all(que)
5}