axios(日本語)

Axios は、Web ブラウザと Node.js 向けのプロミスベースの HTTP クライアントであり、REST API 呼び出しを簡単に行うための使いやすいライブラリを提供します。

Features

  1. プロミスベース:Axios はすべての操作に対して JavaScript のプロミスを返し、非同期処理を可能にし、.then()、.catch()、または async/await 構文を使用してコールチェーンを行うことができます。

  2. エラーハンドリング:Axios は、リクエストエラーを処理するための強力なツールを提供し、より詳細なコンテキスト情報を提供し、失敗シナリオの処理に対する制御を向上させます。

  3. JSON データ変換:Axios は自動的に JSON データを変換し、明示的な応答のパースの必要性をなくします。これにより、API データの処理が簡素化され、冗長なコードが削減されます。


Installation

Axiosをインストールするには、Node.js環境でnpm(npm install)またはyarn(yarn add)コマンドを使用して、'axios'パッケージをインストールします。

Installation

npm install axios

Usage

Axiosは、ブラウザとNode.js環境の両方で使用できる、プロミスベースのHTTPクライアントです。

  • Name
    メソッドの使用法
    Type
    Usage
    Description

    axios.get()、axios.post()、axios.put()、axios.delete()などのメソッドを提供し、HTTPリクエストを送信するために使用します。

Cautions

  • Name
    エラーハンドリング
    Type
    Cautions
    Description

    デフォルトでは、AxiosはHTTPエラーステータスコード(400以上)に対してプロミスを拒否しません。これを処理するには、validateStatusの設定オプションを使用するか、レスポンスのステータスコードを手動でチェックしてエラーを処理します。

  • Name
    リクエストのキャンセル
    Type
    Cautions
    Description

    AxiosはHTTPリクエストのキャンセル機能を提供しており、リクエストの重複実行を防止したり、不要なリクエストを中止するために役立ちます。

  • Name
    セキュリティ
    Type
    Cautions
    Description

    APIキーや認証トークンなどの機密情報を含む場合、これらの情報が公開されないようにすることが重要です。環境変数や別個のセキュリティモジュールを使用して、このような機密情報を処理することを推奨します。

Usage

import axios from 'axios';

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

// POST 요청
axios.post('https://api.example.com/data', {
  title: 'Hello',
  description: 'World'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error', error);
});

Customization

Axiosは強力で高度にカスタマイズ可能なHTTPクライアントです。

Explanation

  • Name
    グローバルAxiosのデフォルト設定
    Type
    Customization
    Description

    グローバルAxiosのデフォルト設定を使用して、すべてのリクエストにデフォルト値を適用することができます。例えば、すべてのリクエストで同じデフォルトURLを使用するために、baseURLを設定することができます。以下のように行います:

  • Name
    カスタムヘッダー
    Type
    Customization
    Description

    特定のリクエストまたはすべてのリクエストに対してカスタムヘッダーを設定することができます。例えば、すべてのリクエストに特定のAPIキーを追加したい場合、以下のように行うことができます:

  • Name
    エラーハンドリング
    Type
    Customization
    Description

    リクエストやレスポンスのエラーのハンドリング方法をカスタマイズすることができます。例えば、特定のHTTPエラーコードに対して共通のハンドリングを追加したい場合、以下のように行うことができます:

Customization

// Global Axios Defaults
axios.defaults.baseURL = 'https://api.example.com';

// Custom Headers
axios.defaults.headers.common['Authorization'] = `Bearer ${API_KEY}`;

// Error Handling
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      console.log('unauthorized, logging out ...');
    }
    return Promise.reject(error);
  }
);

Example

getServerSidePropsを使用して、サーバーサイドレンダリング(SSR)を実行するためにAxiosを利用しています。

Additional Explanation

  • Name
    const apiUrl = process.env.NEXT_PUBLIC_API_URL
    Type
    Example
    Description

    環境変数であるNEXT_PUBLIC_API_URLを取得し、それをapiUrlという変数に保存しています。この環境変数は.envファイルやデプロイ環境に応じて異なる設定ができます。

  • Name
    const res = await axios.get(...)
    Type
    Example
    Description

    axiosライブラリを使用してHTTP GETリクエストを送信しています。URLは、先ほど設定したapiUrlとnameパラメータを組み合わせて構築されます。このリクエストは非同期に処理され、レスポンスが到着するまで実行が一時停止されます。

  • Name
    const character = res.data.data
    Type
    Example
    Description

    Axiosはレスポンスを自動的にJavaScriptオブジェクトに変換します。このオブジェクトのdataプロパティには、サーバーから送信されたデータが含まれています。

  • Name
    catch (error) { ... }
    Type
    Example
    Description

    上記のコードで発生するエラーは、このcatchブロックでキャッチされます。エラーが発生した場合、エラーをコンソールにログ出力し、notFoundオブジェクトを返して404ページを表示します。

[name].jsx

export async function getServerSideProps(context) {
  const { name } = context.params
  const apiUrl = process.env.NEXT_PUBLIC_API_URL

  try {
    const res = await axios.get(
      `${apiUrl}/api/lostark/searchCharacter?name=${name}`,
    )
    const character = res.data.data

    if (!character) {
      throw new Error('Failed to fetch character data')
    }

    return {
      props: {
        character,
      },
    }
  } catch (error) {
    console.error(error)
    return {
      notFound: true,
    }
  }
}