コードをゆっくり読み、必要に応じて変更される情報の流れと情報形式に従います

概要

Axios は、ブラウザーと Node.js の両方から HTTP リクエストを行うために使用される人気のある JavaScript ライブラリです。これは、非同期 HTTP リクエストを REST エンドポイントに送信し、CRUD (作成、読み取り、更新、削除) 操作を実行するプロセスを簡素化するように設計されたオープンソース プロジェクトです。

クリエイター

Axios は Matt Zabriskie によって作成されました。プロジェクトはコミュニティによって維持されており、GitHub で入手できます。

受益者

Axios は次のようなメリットがあります:

• フロントエンド開発者: Web アプリケーションから HTTP リクエストを行うため。
• バックエンド開発者: Node.js アプリケーション内で HTTP リクエストを統合します。
• フルスタック開発者: クライアント側とサーバー側の両方で HTTP リクエストを処理します。

利点

1. プロミスベース: 非同期リクエストとレスポンスの操作が容易になります。
2. インターセプター: リクエストまたはレスポンスを処理する前に変更できるようにします。
3. 自動 JSON データ変換: JSON データの処理を簡素化します。
4. CSRF 保護: クロスサイト リクエスト フォージェリ保護に役立ちます。
5. リクエストとレスポンスの変換: リクエストとレスポンスのカスタム変換。
6. エラー処理: 他のメソッドと比較してエラー処理が簡素化されました。
7. ワイド ブラウザ サポート: すべての最新のブラウザと Node.js で動作します。

使用法

使用される場所

• Web アプリケーション: バックエンド サービスと通信します。
• Node.js アプリケーション: 他の API またはサービスに HTTP リクエストを送信します。
• モバイル アプリケーション: React Native などのフレームワークの一部として。

失敗する場所

1. 重いアプリケーション: メモリを消費するため、非常に大規模なデータ転送には最適ではない可能性があります。
2. ブラウザの制限: CORS が適切に処理されない限り、同一生成元ポリシーの制限が適用されます。
3. 依存関係のサイズ: 管理する必要がある追加の依存関係。最小限のプロジェクトでは懸念事項となる可能性があります。

使用される理由

• 使いやすさ: HTTP リクエストを実行するためのシンプルな API。
• 柔軟性: 簡単に構成可能で拡張可能です。
• コミュニティ サポート: 幅広い採用と広範なコミュニティ サポート。

なぜ使われないのか

• ライブラリ サイズ: 別の依存関係を追加するオーバーヘッド。
• 代替: Fetch API、またはリクエストやスーパーエージェントなどの他のライブラリの優先順位。

使用方法

インストール

npm install axios

基本的な使い方

const axios = require('axios');

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

コメント付きの詳細な使用法

const axios = require('axios');

// Create an instance of axios with default settings
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

// Interceptor to log request details
instance.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

// Interceptor to log response details
instance.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

// Making a POST request
instance.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

誤用の例

1. エラー処理の無視: エラーを適切に処理しないと、アプリケーションがクラッシュする可能性があります。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });
// Error handling should not be omitted

1. 同期リクエストによるコードのブロック: Axios は同期リクエストをサポートしていません。同期動作を期待する方法で使用するのは間違っています。

メソッド

インスタンスメソッド

• axios(構成)
• axios(url[, config])

リクエストメソッド

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

便利なメソッド

• axios.all(反復可能)
• axios.spread(コールバック)

インスタンスの作成

• axios.create([config])

インターセプター

• axios.interceptors.request.use(onFulfilled[, onRejected[, options]])
• axios.interceptors.response.use(onFulfilled[, onRejected[, options]])

設定のデフォルト

• axios.defaults

キャンセル

• axios.キャンセル
• axios.CancelToken
• axios.isキャンセル

結論

Axios は、JavaScript アプリケーションで HTTP リクエストを行うための堅牢で使いやすいライブラリです。リクエストとレスポンスのインターセプト、自動 JSON 変換、Promise ベースのアーキテクチャなどの機能を備えた強力な API を提供します。ただし、潜在的な落とし穴を避けるために、その制限を理解し、適切に使用することが重要です。