axiosでエラーのレスポンスをinterceptorsでハンドルする

エラーのレスポンスを共通処理としてハンドルするために
axiosのinterceptorsを使用する時の手法のメモです。

axiosでAPIをリクエストした際、エラーの場合はこんなJSONが返ってくるとします。

エラーのレスポンス例.json

{
  "errors": [
    {
      "code": "XXXXX"
      "message": "画像が削除されています。"
    }
  ]
}

通常のエラーパターン

responseTypeがjsonの場合など、通常はerror.response.dataを使用します。

axios.interceptors.response.use(
  function(error) {
    const errors = error.response.data.errors;
    if(errors){
      for (const item of errors) {
        console.log(item.message);
      }
    }
  }
);

レスポンスタイプがBlobのパターン

レスポンスのタイプがBlobの場合はerror.response.dataにはBlob形式でエラーレスポンスのJSONが設定されています。
そのため、error.response.dataをBlobからJSONに変換します。

axios.interceptors.response.use(
  async function(error) {
    //Blobの場合でJSONを読み込むためのハンドリングを追加します。
    await onBlobHandler(error);

    const errors = error.response.data.errors;
    if(errors){
      for (const item of errors) {
        console.log(item.message);
      }
    }
  }
);

//BlobをJSONに変換します。
async function onBlobHandler(error) {
  if (error.request.responseType === "blob") {
    const text = await fileReader(error.response.data);
    return JSON.parse(text);
  }
}

※fileReaderはBlobを読み込む自作ヘルパー関数です
下記記事参照
【JavaScript】Blobの中身をJSONに変換する