axiosで複数リクエストを並列に発行する場合のtry-catch記述方法について

Question

やりたいこと

axiosで複数リクエストを並列で発行する場合、それぞれに対してtry-catchをかけて例外が発生したリクエストの結果のみをundefinedとして扱いたいです。

こちらの記事を参考に以下のように並列リクエストを記述するとします。

async function sample() {
  
    // とりあえず、リクエストだけは一括で投げておいて...
    const axiosA = axios.get("./a");
    const axiosA = axios.get("./b");
    const axiosC = axios.get("./c");
  
    // awaitするのは、レスポンスの受け取りのみにする。
    // これなら、どれが一番時間がかかっても、待ち時間はMAX(A, B, C)になる
    const a = (await axiosA).data;
    const b = (await axiosB).data;
    const c = (await axiosC).data;
  
    return [a, b, c]
  
}

この時以下のようにtry-catchをかけてしまうと、a〜cのどれか一つでもリクエスト失敗してしまうと返却値が空配列[]になってしまいます。

async function sample() {
  try {
    const axiosA = axios.get('./a')
    const axiosA = axios.get('./b')
    const axiosC = axios.get('./c')

    const a = (await axiosA).data
    const b = (await axiosB).data
    const c = (await axiosC).data

    return [a, b, c]
  } catch (error) {
    return []
  }
}

そうではなく、例えばcだけ失敗した場合はaとbだけは取得結果を返したいです。
この場合、[a, b, undefined]が返るイメージです。

どのように記述すれば実現できるでしょうか。
宜しくお願いします。

Answer 1

「失敗したときはundefinedでresolveする」ようにすればいいでしょう。

    const a = await axiosA.catch(() => undefined)
    const b = await axiosB.catch(() => undefined)
    const c = await axiosC.catch(() => undefined)

Comments

[tanana_m]

ご回答ありがとうございます。
すいません、正確にはレスポンスの.dataを取得したかったのですが、この場合何か上手い方法はあるでしょうか。
質問内容も修正しました。
記載漏れ大変失礼しました。

[maisumakun]

だったら、dataを取得しようとしても問題ないように、.catch(() => ({}))と失敗時は空オブジェクトにする、で対応できます。

[tanana_m]

やりたいことができました！ありがとうございます