Axiosを使用したHTTPリクエストの認証とエラーハンドリング

まず、Axiosを使用して認証ヘッダーを含むリクエストを送信するには、以下のようにコードを記述します:

import axios from 'axios';
const apiUrl = 'https://api.example.com';
const authToken = 'your_auth_token';
const headers = {
  'Authorization': `Bearer ${authToken}`
};
axios.get(`${apiUrl}/endpoint`, { headers })
  .then(response => {
    // リクエストが成功した場合の処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

上記の例では、authTokenには実際の認証トークンが含まれていることを想定しています。また、apiUrlと/endpointは実際のAPIのエンドポイントに置き換える必要があります。

さらに、Axiosはさまざまなエラーレスポンスに対して異なるエラーハンドリングを行うことができます。以下に、一般的なエラーレスポンスの例と、それに対するエラーハンドリングの方法を示します:

axios.get(`${apiUrl}/endpoint`, { headers })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // リクエストは成功しましたが、エラーレスポンスが返されました
      console.error(error.response.data);
      console.error(error.response.status);
      console.error(error.response.headers);
    } else if (error.request) {
      // リクエストが作成されましたが、レスポンスが受け取れませんでした
      console.error(error.request);
    } else {
      // 何らかのリクエストの設定中にエラーが発生しました
      console.error('Error', error.message);
    }
    console.error(error.config);
  });

上記の例では、error.response、error.request、およびerror.configを使用して、異なるエラーケースに対するエラーハンドリングを行っています。

以上が、Axiosを使用して認証付きのHTTPリクエストを行い、エラーハンドリングを行う方法についての解説です。これに基づいて、約1000語のブログ投稿を作成することができます。