ブラウザ用のJavaScript HTTPライブラリの比較

現代のWeb開発は、AJAXリクエストに大きく依存しています。ネイティブXMLHttpRequestオブジェクトはこの機能を提供しますが、多くの開発者は、より単純なAJAX処理のためにjQueryなどのライブラリを使用することを好みます。 この記事では、2つの一般的な選択肢を比較します。SuperAgentとAxiosは、サンプルHTTPサービスへのリクエストを通じてその機能を実証しています。

重要な違い：

両方とも、基本的なGET、投稿、およびAPIへのリクエストを配置するのに適していますが、現代のアップロード進行監視などの機能がありません

機能的には類似していますが、著者はSuperagentのAPIがより直感的であると感じています。 ただし、約束の統合が重要な場合、Axiosが好ましい選択です。

は、ブラウザの互換性を快適に管理したり、最新のブラウザのみをターゲットにしたりする開発者にとって、実行可能なオプションです。

XMLHttpRequest

ライブラリは紹介：

XMLHttpRequest

同期リクエストと非同期リクエストの両方をサポートしています。 JavaScriptはシングルスレッドであるため、同期リクエストは実行の実行をブロックし、非同期リクエストが実用的な選択を行います。 AxiosとSuperagentの両方は、非同期リクエストのみを実行します。 リクエストはバックグラウンドで発生するため、応答はすぐには利用できません。 コールバック関数は、受信したら応答を処理します

Axiosは、このプロセスを管理するための約束を使用し、他の非同期コードとのより良い統合を提供します。 SuperagentのAPIは、標準的な約束パターンに準拠していません。 これにより、複数のライブラリまたはカスタム約束を操作するときに、Axiosがより堅牢なオプションになります。 ただし、Superagentは、より広い認識と小規模だが便利なプラグインエコシステムを誇っています（たとえば、URLプレフィックスなど）。 両方のライブラリは、基本的なAPIインタラクション（Get、Post、Put）に優れていますが、現代で利用可能なアップロード進行追跡などの高度な機能がありません。 彼らの主な利点は、リクエストの構成と実行のための簡潔でチェーン可能なAPIにあります。

インストール：XMLHttpRequest

はインストールを必要としません。最新のブラウザー（IE8以降）に組み込まれています。 SuperAgentはNPMモジュールで、NPM（node.js/io.jsに含まれる）とbrowserifyなどのクライアント側のパッケージツールが必要です。 Axiosは、NPMモジュール、AMDモジュール、およびスタンドアロンJavaScriptファイルとして利用できます。

XMLHttpRequestの例API（ベーカリーオーダー管理）：

この例では、仮説ベーカリーの注文管理API：

を使用しています

• get/orders?start=YYYY-MM-DD&end=YYYY-MM-DD：日付範囲内で注文を取得します。
• post/orders：新しい注文を作成します。

データはJSON形式で交換されます。 たとえば、3月10日に配達するために3つのチョコレートと5つのレモンケーキを注文するには（5月4日に注文）：

{
  "chocolate": "3",
  "lemon": "5",
  "delivery": "2015-03-10",
  "placed": "2015-03-04"
}

新しい注文の作成：

これには、HTTPメソッド（post）、url（/orders）、リクエストボディ（注文の詳細）、およびコンテンツタイプ（application/json）を指定する必要があります。

• superagent：

var request = require('superagent');

request.post('/orders/')
  .send({'chocolate': 2, 'placed': '2015-04-26'})
  .type('application/json')
  .accept('json')
  .end(function(err, res) {
    if (err) {
      console.log('Error!');
    } else {
      console.log(res.body);
    }
  });

• axios：

axios.post(
  '/orders/',
  {
    chocolate: 2,
    placed: '2015-04-26'
  },
  {
    headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(response) {
    console.log('Error!');
  });

• xmlhttpRequest：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/orders/', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.log('Error!');
  }
};
xhr.send(JSON.stringify({chocolate: 2, placed: '2015-04-26'}));

日付範囲による注文の取得： これには、クエリパラメーター（

および

）を追加することが含まれます start end

superagent：

request.get('/orders')
  .query({start: '2015-04-22', end: '2015-04-29'})
  .accept('json')
  .end(function(err, res) {
    // Handle error and response
  });

axios：

axios.get(
  '/orders',
  {
    headers: {
      'Accept': 'application/json'
    },
    params: {
      start: '2015-04-22',
      end: '2015-04-29'
    }
  }
);

xmlhttpRequest：

推奨事項と結論：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/orders?start=' + encodeURIComponent('2015-04-22') + '&end=' + encodeURIComponent('2015-04-29'), true);
// ...rest of the code

AxiosとSuperagentは同様の機能を提供し、Axiosの約束ベースのアプローチが重要な差別化要因です。 Superagentはより合理化されたAPIを提供しますが、Axiosの約束への順守により、より汎用性が高くなります。 ブラウザ固有のニュアンスを快適に管理する開発者にとって、有効なオプションのままです。 選択は、プロジェクトのニーズと開発者の好みに依存します。 GitHubリポジトリ（入力で提供されていないリンク）には、完全なコードの例が含まれている可能性があります。 入力テキストの残りの部分は、この出力に簡潔に含まれていないよくある質問と回答で構成されています。

以上がブラウザ用のJavaScript HTTPライブラリの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。