TypeScript x axios で配列を非同期で処理する方法

やりたいこと

• 会員情報を複数取得したい
• 会員情報を複数取得できるAPIが存在しない

実装

APIへアクセスするファイル

export default class Sample {
  public async fetchUsers(): Promise<{username: string, /* ... 適当な型定義 */}[]> {
    return Promise.all(
      [1, 2, 3].map(async row =>
        axios.get(`http://example.jp/api/member/${row}`),
      ),
    ).then((results: AxiosResponse<{ username: string, /* ...適当な型定義 */ }>[]) =>
      results.map(res => ({
        username: res.data.username,
        // ... レスポンスの整形
      })),
    );
  }
}

※適当な型定義の部分は*.d.tsからimportするのを想定

配列で行うことがaxiosじゃなかったりして、レスポンスの整形とかが必要なければそのままawait Promise.all()で返却してOK

会員情報を取得するファイル

const users = await new Sample().fetchUsers();
console.log(users); // [{username: "レスポンス1(res.data.username)", /* 整形した戻り値 */}, {username: "レスポンス2", /* 整形した戻り値 */}]

---

TSで書いたコードをブログに書くときって型情報とか消すから、これくらいならJSで書いたほうがスッキリしていいな...タイトル詐欺ごめんなさい...