非同期リクエストXHR、AJAX、フェッチとの間の差と比較axios

ディレクトリ

1. XMLHttpRequestオブジェクト
2. jQueryのAJAX
3. axios
4.フェッチ
参照

なぜ：なぜそれを行うための別の方法はありますか？
何：これらは、非同期データ要求の方法です。ない場合にはページサーバ、Exchangeデータとの通信、または更新するためのページをリロードします。
どのように：彼らは自分の特性を持っています。

1. XMLHttpRequestオブジェクト

現代のブラウザでは、ほとんどすべてのXMLHttpRequestオブジェクトを介して、サーバーとデータを交換するために開始します。それはそうでフォーマットJSON、XML、HTMLテキストとテキストを使用してデータを送受信することができます。
それは私たちに多くの利益をもたらしました。

ページをリロードせずにページを更新
ページが読み込まれた後、要求/サーバからデータを受け取ります
バックグラウンドでデータをサーバーに送信します。

しかし、それはまた、いくつかの欠点があります：

あなたは価値の多くを設定する必要があり、また、より複雑です。
初期のIEブラウザは、独自の実装を持っているので、あなたは、互換性のあるコードを記述する必要があります。

if (window.XMLHttpRequest) { // model browser
  xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
  xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
  try {
    // TODO 处理响应
    if (xhr.readyState === XMLHttpRequest.DONE) {
      // XMLHttpRequest.DONE 对应值是 4
      // Everything is good, the response was received.
      if (xhr.status === 200) {
        // Perfect!
      } else {
        // There was a problem with the request.
        // For example, the response may hava a 404 (Not Found)
        // or 500 (Internal Server Error) response code.
      }
    } else {
      // Not ready yet
    }
  } catch (e) {
    // 通信错误的事件中（例如服务器宕机）
    alert('Caught Exception: ' + e.description)
  }
}

2. jQueryのAJAX

より効率的な動作のDOMにするために、作成された、ブラウザの互換性の問題のいくつかを回避してjQuery。これは、内部にあるAJAX要求にもさまざまなブラウザと互換性があり、あなたは、シンプルで簡単な方法を持つことができ$.get、$.post。簡単に言えば、それはしているXMLHttpRequestオブジェクトをパッケージ化します。

$.ajax({
  type: 'POST',
  url: url, 
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
})

長所：

一次XHR包装、それは使用を簡素化し、プロセスと互換性が作られました。
追加されましたJSONPサポートが単にクロスドメイン処理部することができます。

短所：

複数の要求があり、かつ、依存関係が存在する場合、コールバック地獄を容易に形成します。
自体はMVCのためにプログラムされている、MVVMは今の波のフロントエンドを満たしていません。
AJAXはjQueryの方法です。あなただけの全体を導入することがありjQueryのAJAXを使用する場合は非常に無理があります。

3. axios

Axiosこれは、に基づいており、ブラウザで、使用可能なライブラリで。また、元の本質であるパッケージが、それは、最新のESの仕様に沿って、約束のバージョンを実装しています。promiseHTTPnode.jsXMLHttpRequest

axios({
    method: 'post',
    url: '/user/12345',
    data: {
      firstName: 'liu',
      lastName: 'weiqin'
    }
  })
  .then(res => console.log(res))
  .catch(err => console.log(err))

Vue2.0後、特に雨は川が大幅にあなたが使用することをお勧めしaxiosデータを要求します。
長所：

ブラウザから作成XMLHttpRequests
以下からのnode.js作成http要求
サポートPromiseAPI
インターセプトのリクエストとレスポンス
変換要求データと応答データ
キャンセル要求
自動変換JSONデータ
クライアント・サポート・防衛 XSRF

短所：

ブラウザの保有現代世代のみ。

4.フェッチ

Fetch API提供してJavaScriptアクセスして操作するためのインタフェースHTTPのダクト、例えば、要求と応答の部分を。また、世界的な提供fetch()を非同期ネットワーク経由でリソースにアクセスするためのシンプルで合理的な方法を提供する方法を。
fetch低レベルのAPIは、代わりにXHR、あなたは簡単に様々なフォーマット、非テキストフォーマットを扱うことができます。これは、簡単になど、他の技術によって使用することができますService Workers。しかし、良いを使用したいfetch、あなたはいくつかのパッケージの契約を行う必要があります。

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

長所：クロスドメインプロセス
構成では、追加mode： 'no-cors'のクロスドメインの缶を

fetch('/users.json', {
    method: 'post', 
    mode: 'no-cors',
    data: {}
}).then(function() { /* handle response */ });

fetch現在の問題が発生しました：

fetch唯一の要求ネットワークに与え400、500カプセル化される必要がある処理に成功した要求の両方、
fetchデフォルトはなりませんcookieあなたが設定項目を追加する必要があり、。
fetchそれはサポートしていませんabort、タイムアウト制御をサポートして使用していないsetTimeoutとPromise.rejectコントロールの実装はタイムアウト要求プロセスは、廃棄物の流れが得られ、バックグラウンドで動作し続け防ぐことはできません。
fetchそこネイティブ要求の進捗状況を監視する方法はありません、とXHRすることができます。

ので、予めご了承くださいfetch仕様をしてjQuery.ajax()、2つの方法がありますが、心に留めておくために：

-のエラー代表受信したときHTTP 状态码からの時間をfetch()復帰Promise 拒否としてマークされない HTTP応答コードの状態であっても、404または500。代わりに、Promise 状态としてマークされているresolve（であろうがresolveの値を返すok属性セットをfalse）ネットワーク障害や要求がブロックされている場合のみ、ラベル付けされますreject。

-デフォルトでは、fetch サーバーから任意のクッキーを送信または受信していないサイトは、ユーザーに依存している場合、session、未認証の要求はになります（送信されるようにcookies、あなたが設定する必要がありますcredentialsオプション）。