JavaScriptにおけるサードパーティライブラリの統合

ネイティブの fetch() 関数に加えて、JavaScriptでHTTPリクエストを行うためのサードパーティ製ライブラリがいくつか利用可能です。最も人気のあるライブラリの一つが Axios です（ Axios Docs)。これらのライブラリは、APIの操作を簡素化し、コードの可読性を向上させる追加機能や利点を提供します。

Axiosや他のライブラリをネイティブfetch()より使う理由

fetch() APIは強力ですが、Axios のようなサードパーティ製ライブラリが解決するいくつかの制限があります：

• 自動JSONパース：AxiosはJSONレスポンスを自動的にパースしますが、fetch()では手動でresponse.json()を呼び出す必要があります；
• タイムアウト設定：Axiosはリクエストのタイムアウト設定が可能ですが、fetch()には標準でサポートがありません；
• リクエスト・レスポンスインターセプター：Axiosはリクエスト送信前やレスポンス受信後に関数を実行できるインターセプターを提供しており、認証トークンの追加やリクエストのロギングに便利です；
• よりシンプルな構文：Axiosはリクエストやレスポンス処理のためのよりシンプルで一貫性のある構文を持っています；
• 古いブラウザのサポート：Axiosは、ネイティブのfetch() APIを完全にサポートしていない古いブラウザにも対応しています。

Axiosの基本的な使い方

AxiosはGETおよびPOSTリクエストのためのシンプルな構文を提供します。fetch()と同様にPromiseを返しますが、JSONのパースなどの繰り返し作業を自動で処理します。

AxiosによるGETリクエスト

この例は、Axios を使用した GET リクエストの方法を示しています。getPostWithAxios 関数は axios.get() を呼び出して API エンドポイント（/posts/1）からデータを取得します。Axios は JSON レスポンスを自動的に解析するため、別途 .json() を呼び出す必要がありません。try...catch ブロックでエラーを処理し、HTML に投稿タイトルまたはエラーメッセージを表示します。

Axios を使った POST リクエスト

この例は、Axios を使用して API にデータを送信する POST リクエストを示しています。sendPostWithAxios 関数は、API エンドポイント（axios.post()）と新しい投稿のデータ（/posts、title、body を含む）を指定して userId を呼び出します。Axios はデータを自動的に JSON 形式で送信し、処理を簡素化します。try...catch ブロックはエラーを処理し、作成された投稿タイトルまたはエラーメッセージを HTML に表示します。

Axios によるエラー処理

Axios は、エラー処理のための使いやすい仕組みを提供します。リクエストが失敗した場合（例：ネットワーク障害やサーバーエラー）、Axios は自動的にエラーをスローし、try...catch を使って処理できます。

この例は、Axiosによるエラー処理を示しています。getInvalidPost関数は、存在しないエンドポイントからデータを取得しようとaxios.get()を使用します。リクエストが失敗すると、Axiosは自動的にエラーをスローします。try...catchブロックがこのエラーを捕捉し、エラーメッセージをHTMLに表示します。

Axiosの追加機能と利点

Axiosの追加機能について説明します。

リクエストおよびレスポンスインターセプター

Axiosでは、リクエストやレスポンスを処理前にインターセプトして変更できます。これにより、認証トークンの追加、リクエストのロギング、グローバルなエラー管理などが可能です。

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

タイムアウトのサポート

Axiosはリクエストにタイムアウトを設定でき、リクエストが無限に待機し続けることを防止。

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

エラー処理の簡素化

Axiosはレスポンスステータスが2xx範囲外の場合に自動的にエラーをスローし、標準化された方法で失敗を処理可能。

ブラウザー対応

Axiosはすべての最新ブラウザーで動作し、古いブラウザー向けにポリフィルも提供。プロジェクトによってはより柔軟な選択肢。