【保存版】AxiosでHTTPエラーをスマートにキャッチ！ステータスコード取得から詳細な情報処理まで

2024-06-13

AxiosでHTTPエラーのステータスコードを取得する方法

Axiosは、JavaScriptでHTTPリクエストを簡単に行うためのライブラリです。エラーが発生した場合、エラーオブジェクトがcatchブロックに渡されます。このオブジェクトには、ステータスコードを含む、エラーに関する情報が含まれています。

ステータスコードの取得

以下のコードは、axiosを使用してAPIにGETリクエストを行い、エラーが発生した場合にステータスコードを取得する方法を示しています。

axios.get('/users/123')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (error.response) {
      console.log('ステータスコード:', error.response.status);
    } else {
      console.log('エラー:', error.message);
    }
  });

このコードでは、以下の処理が行われます。

axios.getを使用して、/users/123へのGETリクエストを行います。
リクエストが成功した場合、thenブロックが実行され、レスポンスデータがコンソールに出力されます。
リクエストが失敗した場合、catchブロックが実行されます。
error.responseが存在する場合、ステータスコードがコンソールに出力されます。

補足

ステータスコード以外にも、エラーオブジェクトには以下の情報が含まれています。
- エラーメッセージ
- ヘッダー
- データ

axios.get('/users/123')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (error.response) {
      console.log('ステータスコード:', error.response.status);
      console.log('エラーメッセージ:', error.response.data);
      console.log('ヘッダー:', error.response.headers);
    } else {
      console.log('エラー:', error.message);
    }
  });

エラーメッセージとヘッダーの出力: error.responseが存在する場合、ステータスコードに加えて、エラーメッセージとヘッダーもコンソールに出力します。これにより、エラーの原因をより詳しく調査することができます。
エラーオブジェクトの詳細な表示: console.log(error)を使用して、エラーオブジェクト全体を出力します。これは、デバッグに役立ちます。

このコードを参考に、状況に合わせてカスタマイズして、独自のエラー処理ロジックを作成することができます。

AxiosでHTTPエラーのステータスコードを取得するその他の方法

try / catch を使用する

try {
  const response = await axios.get('/users/123');
  console.log(response.data);
} catch (error) {
  if (error.response) {
    console.log('ステータスコード:', error.response.status);
    console.log('エラーメッセージ:', error.response.data);
    console.log('ヘッダー:', error.response.headers);
  } else {
    console.log('エラー:', error.message);
  }
}

この方法は、非同期コードでエラー処理を行う場合に役立ちます。

カスタムエラーハンドラを作成する

const customErrorHandler = (error) => {
  if (error.response) {
    console.log('ステータスコード:', error.response.status);
    console.log('エラーメッセージ:', error.response.data);
    console.log('ヘッダー:', error.response.headers);
  } else {
    console.log('エラー:', error.message);
  }
};

axios.get('/users/123')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(customErrorHandler);

この方法は、エラー処理ロジックを再利用したい場合に役立ちます。

Axios interceptorsを使用する

axios.interceptors.response.use(null, function (error) {
  if (error.response) {
    console.log('ステータスコード:', error.response.status);
    console.log('エラーメッセージ:', error.response.data);
    console.log('ヘッダー:', error.response.headers);
  } else {
    console.log('エラー:', error.message);
  }
});

axios.get('/users/123');