Axios HTTPエラー ステータスコード 取得

AxiosでHTTPエラーのステータスコードを取得する方法 (日本語)

Axiosは、JavaScriptでHTTPリクエストを行うためのライブラリです。エラーが発生した場合に、そのエラーのステータスコードを取得する方法について説明します。

基本的な方法

1. Axiosのthenメソッドを使用して、リクエストが成功した場合の処理を定義します。
2. catchメソッドを使用して、エラーが発生した場合の処理を定義します。
3. エラーオブジェクトのresponse.statusプロパティを使用して、ステータスコードを取得します。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made, but the server responded with an error
      console.error('Error:', error.response.status);
    } else if (error.request) {
      // The request was made, but no response was received
      console.error('Error:', error.request);
    } else {
      // Something happened in setting up the reques   t that caused an error
      console.error('Error:', error.message);
    }
  });

具体的な例

axios.get('https://api.example.com/invalid-endpoint')
  .then(response => {
    // This code will not be executed
  })
  .catch(error => {
    if (error.response && error.response.status === 404) {
      console.error('Not Found');
    } else {
      console.error('Other Error:', error);
    }
  });

ポイント

• エラー処理のロジックを適切に実装することで、アプリケーションの信頼性を向上させることができます。
• error.response.statusプロパティは、サーバーから返されたステータスコードです。

基本的な例

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made, but the server responded with an error
      console.error('Error:', error.response.status);
    } else if (error.request) {
      // The request was made, but no response was received
      console.error('Error:', error.request);
    } else {
      // Something happened in setting up the reques   t that caused an error
      console.error('Error:', error.message);
    }
  });

具体的な例: 404エラーの処理

axios.get('https://api.example.com/invalid-endpoint')
  .then(response => {
    // This code will not be executed
  })
  .catch(error => {
    if (error.response && error.response.status === 404) {
      console.error('Not Found');
    } else {
      console.error('Other Error:', error);
    }
  });

複数のエラー処理

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('Success:', response.data);
  })
  .catch(error => {
    if (error.response) {
      switch (error.response.status) {
        case 400:
          console.error('Bad Request');
          break;
        case 401:
          console.error('Unauthorized');
          break;
        case 404:
          console.error('Not Fou   nd');
          break;
        case 500:
          console.error('Internal Server Error');
          break;
        default:
          con   sole.error('Other Error:', error);
      }
    } else if (error.request) {
      console.error('No Response');
    } else {
      console.error('Request Error:', error.message);
    }
  });

カスタムエラーハンドリング

function handleError(error) {
  if (error.response) {
    switch (error.response.status) {
      // ...
    }
  } else if (error.request) {
    // ...
  } else {
    // ...
  }
}

axios.get('https://api.example.com/data')
  .then(response => {
    // ...
  })
  .catch(handleError);

Promiseのcatchメソッド

AxiosはPromiseを返します。そのため、Promiseのcatchメソッドを使用してエラー処理を行うこともできます。

axios.get('https://api.example.com/data')
  .then(response => {
    // Success
  })
  .catch(error => {
    console.error('Error:', error.response.status);
  });

async/await

async/await構文を使用すると、より同期的なコードスタイルでエラー処理を行うことができます。

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('Success:', response.data);
  } catch (error) {
    console.error('Error:', error.response.status);
  }
}

fetchData();

エラー処理を再利用するために、カスタムエラーハンドリング関数を作成することもできます。

function handleError(error) {
  if (error.response) {
    console.error('Error:', error.response.status);
  } else if (error.request) {
    console.error('No Response');
  } else {
    console.error('Request Error:', error.message);
  }
}

axios.get('https://api.example.com/data')
  .then(response => {
    // Success
  })
  .catch(handleError);

Axiosのインターセプター

Axiosのインターセプターを使用すると、リクエストやレスポンスをグローバルに処理することができます。

axios.interceptors.response.use(
  response => response,
  error => {
    console.error('Error:', error.response.status);
    return Promise.reject(error);
  }
);