axios でエラーレスポンスを取得するにはどうしたらいいの？

非同期通信を簡単に実装できる npm パッケージ「axios」。

• axios - npm

通常、レスポンスデータを取得する際は次のように実装する。

import axios from 'axios';

(async () => {
  const response = await axios.post('/api/login', { /* リクエストボディ */ });
  // ↓ レスポンスデータ
  const data = response.data;
})();

axios.post() や axios.get() の戻り値から .data を抜き取ると、レスポンスデータとなる。

一方、リクエスト結果が 404 だとか 500 だとか、何らかのエラーとなった場合、Promise の .catch() ないしは async / await の catch 句に入る。

その時の error オブジェクトは response とは違ってエラー情報が格納されており、一見するとレスポンスデータが見えなくて困った。

調べてみたら、error.response.data がエラー時のレスポンスデータであることが分かった。

import axios from 'axios';

(async () => {
  try {
    const response = await axios.post('/api/login', { /* リクエストボディ */ });
    // ↓ 正常時のレスポンスデータ
    const data = response.data;
  }
  catch(error) {
    // ↓ エラー時のレスポンスデータ
    const errorData = error.response.data;
  }
})();

こういうことであった。エラー時にレスポンスが受け取れないワケではないので、安心。ｗ

• 参考 : Catch request errors with Axios · GitHub