データリクエスト ajax、Ajax、jQuery ajax、axios と fetch の違い

Axios、Ajax、jQuery Ajax、および Fetch はすべて JavaScript でデータリクエストを送信するために使用されるツールですが、それらの間には次のような違いがあります。

1: アクシオス:

axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP ライブラリです。
    機能:
        ブラウザからの XMLHttpRequest の作成、
        node.js からの http リクエストの作成、         リクエストとレスポンスの
        Promise API インターセプトのサポート、         リクエストデータとレスポンスデータの変換、         リクエストのキャンセル、         JSON の自動変換、データクライアントは CSRF         送信とダウンロードの進行         に対する防御をサポート、等

以下は、Axios を使用して GET リクエストを送信する基本的な使用法です。

1.Axiosをインストールする

npm install axios

2.Axiosの紹介

import axios from 'axios'

3.GETリクエストを送信する

axios.get('/api/user')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

上記のコードでは、axios.get() メソッドを通じて GET リクエストを送信し、リクエストされた URL を指定します。リクエストが成功すると、response.dataレスポンスデータを取得します。リクエストが失敗した場合は、catch() を通じてエラーをキャッチし、それに応じて処理できます。

Axios は GET リクエストに加えて、POST、PUT、DELETE などのリクエストの送信もサポートしており、メソッド名は GET とは異なりますが、具体的な使用方法は似ています。

Axios では、リクエストヘッダー、リクエストパラメーター、リクエストインターセプター、レスポンスインターセプターなどの機能の設定もサポートされており、使用方法の詳細については、公式ドキュメントを参照してください。

二：Ajax：

Ajax は、XMLHttpRequest オブジェクトを使用してサーバーとデータを交換するテクノロジーであり、ページ上の他の操作をブロックすることなく、データを非同期的に読み込むことができます。ただし、Ajax を使用する場合、リクエストのタイムアウトやネットワークエラーなどの一部のエラーを手動で処理する必要があります。

ネイティブ Ajax の使用法は jQuery よりも若干複雑で、XMLHTTPRequest オブジェクトのさまざまなプロパティとメソッドを手動で処理する必要があります。以下は基本的な GET リクエストです。

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求地址
xhr.open('GET', '/api/user');

// 监听状态改变事件
xhr.onreadystatechange = function() {
  // 如果请求已完成
  if (xhr.readyState === 4) {
    // 如果请求成功
    if (xhr.status === 200) {
      // 获取响应数据并进行处理
      console.log(xhr.responseText);
    } else {
      // 请求失败，输出错误信息
      console.log(xhr.status + ' ' + xhr.statusText);
    }
  }
};

// 发送请求
xhr.send();

上記のコードでは、まず XMLHttpRequest オブジェクトを作成し、次に open() メソッドを呼び出してリクエストアドレスを設定します。次に、XMLHttpRequest オブジェクトのreadyState プロパティが変更されるとトリガーされる onreadystatechange イベントをリッスンしました。readyState が 4 の場合、リクエストが完了したことを意味します。このとき、リクエストが成功したかどうかは status 属性で判断でき、成功した場合は、responseText 属性を通じてレスポンスデータを取得できます。最後に、send() メソッドを呼び出してリクエストを送信します。

ネイティブ Ajax では、GET リクエストに加えて、POST、PUT、DELETE などのリクエストの送信もサポートされており、具体的な使用方法は jQuery に似ています。ネイティブ Ajax では、リクエストヘッダー、リクエストパラメーター、リクエストタイプ、タイムアウトなどの機能の設定もサポートされているため、対応するプロパティを手動で設定する必要があります。

3: jQuery Ajax

jQuery Ajax は Ajax カプセル化に基づいており、シンプルで使いやすいですが、コードに jQuery ライブラリを導入する必要があります。

以下は、jQuery を使用して GET リクエストを送信する基本的な使用法です。

1.jQueryを導入する

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2.GETリクエストを送信する

$.ajax({
  url: '/api/user',
  type: 'GET',
  success: function(response) {
    console.log(response)
  },
  error: function(xhr, status, error) {
    console.log(error)
  }
})

上記のコードでは、$.ajax() メソッドを使用して GET リクエストを送信し、リクエストされた URL を指定します。リクエストが成功すると、成功コールバックを通じて応答データを取得します。リクエストが失敗した場合は、エラーコールバックを通じてエラーをキャッチし、それに応じて処理できます。

GET リクエストに加えて、Ajax では POST、PUT、DELETE などのリクエストの送信もサポートされており、メソッド名は GET とは異なりますが、具体的な使用方法は似ています。

Ajax では、リクエストヘッダー、リクエストパラメータ、リクエストタイプ、タイムアウト、その他の機能の設定もサポートされており、その使用方法の詳細については、jQuery の公式ドキュメントを参照してください。

4: フェッチ

Fetch は ES6 の新しい API であり、Promise オブジェクトに基づいて実装されており、XMLHttpRequest オブジェクトを置き換えることができます。Fetch には、より強力な機能とより単純な構文があります。ただし、Fetch はエラーを処理するときにさらに面倒で、一部のエラーは手動で処理する必要があります。

以下は基本的な GET リクエストです。

fetch('/api/user')
  .then(response => {
    // 如果请求成功
    if (response.ok) {
      // 获取响应数据并进行处理
      return response.json().then(data => console.log(data));
    } else {
      // 请求失败，输出错误信息
      console.log('网络请求失败');
    }
  })
  .catch(error => {
    // 请求过程中出现异常
    console.error(error);
  });

上記のコードでは、 fetch() メソッドを呼び出してリクエストを送信し、Promise オブジェクトを返します。Promise オブジェクトのコールバック関数では、応答の status 属性に基づいてリクエストが成功したかどうかを判断でき、成功した場合は、response.json() メソッドを呼び出して応答データを取得して処理できます。Promise オブジェクトの catch() メソッドでは、リクエスト中に発生する例外を処理できます。

Fetch API は GET リクエストに加えて、POST、PUT、DELETE などのリクエストの送信もサポートしており、具体的な使用方法は jQuery と同様です。Fetch API では、リクエストヘッダー、リクエストパラメータ、リクエストタイプ、タイムアウト、その他の機能の設定もサポートされているため、対応するパラメータを手動で設定する必要があります。Fetch API は Promise に基づいているため、クロスドメインリクエストを処理する場合は CORS プロトコルを使用する必要があることに注意してください。そうしないと、クロスドメインリクエストはブラウザによって拒否されます。

5: Ajax、jQuery ajax、axios、fetch の違い:

アヤックス：

言うまでもなく、ajax はバックエンドリクエストを送信するための最も初期の技術です。これはオリジナルの js に属します。コアは XMLHttpRequest オブジェクトを使用します。複数のリクエストの間に順序関係がある場合、コールバック地獄が発生します。

JQuery Ajax：

jQueryフレームワークでバックエンドリクエストを送信するための技術で、jQueryがオリジナルをベースにカプセル化されているため、当然jquery Ajaxもオリジナルのajaxをカプセル化したものとなります。

フェッチ：

Fetch は AJAX の代替として知られており、ES6 で登場し、ES6 では Promise オブジェクトを使用します。Fetch は Promise に基づいて設計されています。Fetch のコード構造は ajax よりもはるかに単純で、パラメーターは jQuery ajax に少し似ています。ただし、fetch は ajax をさらにカプセル化したものではなく、ネイティブ js であることを覚えておく必要があります。Fetch 関数はネイティブ JS であり、XMLHttpRequest オブジェクトを使用しません。

アクシオス：

Axios はネイティブ JS ではないため、インストールする必要がありますが、クライアント側または Nodejs 側で使用できます。Axios は、リクエストフェーズとレスポンスフェーズ中にインターセプトすることもできます。これも Promise オブジェクトに基づいています。具体的には、axios の概念を参照してください。

概要: Axios は Ajax や jQuery Ajax よりも強力ですが、Fetch はより新しく高度な API ですが、いくつかの問題もあります。ニーズに合ったツールを選択すると、コード作成の効率が向上し、エラーのリスクが軽減されます。