Corredor

ウェブ、プログラミングの勉強メモ。

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

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

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

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;
  }
})();

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

これからはじめるVue.js実践入門

これからはじめるVue.js実践入門