2020-05-24——ajax、axios、fetch の違い

1.jquery ajax

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

従来の Ajax は XMLHttpRequest を参照します(XHR) は、バックエンド リクエストを送信するための初期のテクノロジであり、オリジナルの js の一部です。コアは XMLHttpRequest オブジェクトを使用します。複数のリクエスト間に連続した関係がある場合、コールバック 地獄が発生します。

JQuery ajax は、ネイティブ XHR のカプセル化に加えて、JSONP のサポートも追加します。長年の更新とメンテナンスを経て、利点は言うまでもありませんが、欠点を挙げるとすれば次のとおりです。
1. MVC 用に設計されており、現在のフロントエンドに準拠していません。 Inspur
2. ネイティブ XHR 開発に基づいており、XHR 自体の構造は明確ではありません。
3. JQuery プロジェクト全体が大きすぎ、ajax を使用するためだけに JQuery 全体を導入するのは非常に不合理です (パーソナライズされたパッケージング ソリューションを採用しており、CDN サービスを享受できません)
4. 分離の原則に準拠していません。懸念事項の分離 (Separation of Concerns)
5 .設定と呼び出し方法は非常に混乱しており、イベントベースの非同期モデルはフレンドリーではありません。

追記: MVVM (Model-View-ViewModel) は、古典的な Model-View-Controller (MVC) パターンから派生したものです。 MVVM の登場により、GUI フロントエンド開発とバックエンド ビジネス ロジックの分離が促進され、フロントエンド開発効率が大幅に向上します。 MVVM の中核となるのは ViewModel レイヤーです。これは転送ステーション (値コンバーター) のようなもので、データの管理と使用を容易にするためにモデル内のデータ オブジェクトを変換する役割を果たします。このレイヤーは、ビューとの上向きの双方向データ バインディングを実行します。下位層は、データに対するインターフェイス要求を通じてモデル層と対話し、上位層と下位層の間のリンクとして機能します。 View レイヤーは Model レイヤーのデータを表示するのではなく、ViewModel のデータを表示します。これにより、View レイヤーと Model レイヤーが完全に分離されます。計画の実行の最も重要な部分。

2、アクシオス

axios({ メソッド: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }}).then(function (response) { console.log(response); }).catch(function (error) { console.log(error);});<br>

Vue2.0 の後、You Yuxi は JQuery ajax の代わりに axios を使うことをみんなに勧めました。多くの人々 。
axios は、Promise の実装バージョンであり、最新の ES 仕様に準拠していることを除けば、本質的にはネイティブ XHR のカプセル化です。
1.ブラウザからの XMLHttpRequest
2. Promise API のサポート
3. クライアントは、CSRF の防止をサポートします
4. 同時リクエストに対するいくつかのインターフェイスを提供します (重要、多くの操作を容易にします)
5. Node.js から http リクエストを作成します
6. インターセプトリクエストとレスポンス
7. リクエストとレスポンスのデータを変換する
8. リクエストをキャンセルする
9. JSON データを自動的に変換する

PS: CSRF を防ぐ: ブラウザの同一生成元に従って、各リクエストに Cookie から取得したキーを持たせるだけですこのようにして、バックエンドは、リクエストが偽の Web サイト上のユーザーからの誤解を招く入力であるかどうかを簡単に識別し、正しい戦略を採用できます。

3. フェッチ

try { let request = await fetch(url); let data = response.json(); console.log(data);} catch(e) { console.log("おっと、エラー", e);}<br>

Fetch は AJAX の代替として知られており、ES6 で登場し、ES6 では Promise オブジェクトを使用します。 Fetch は Promise に基づいて設計されています。 Fetch のコード構造は ajax よりもはるかに単純で、パラメーターは jQuery ajax に少し似ています。ただし、fetch は ajax をさらにカプセル化したものではなく、XMLHttpRequest オブジェクトを使用しないネイティブ js であることを覚えておく必要があります。
fetch の利点: 1. 関心の分離に準拠し、1 つのオブジェクト内でイベントによって追跡される入力、出力、およびステータスが混在しない
2. より優れた、より便利な記述方法
率直に言って、上記の理由はまったく異なります。私にとって、それは説得力がありません。なぜなら、Jquery と Axios の両方が xhr を十分にパッケージ化するのに役立ち、使用するのに十分便利だからです。なぜフェッチを学ぶためにまだ多くの労力を費やす必要があるのでしょうか。
フェッチの主な利点は次のとおりです:

1. シンプルな構文、よりセマンティックな 2. 標準の Promise 実装に基づいており、async/await3 をサポートしています。[isomorphic-fetch](https://github.com) /matthew-andrews/isomorphic-fetch) 4. より低レベルで豊富な API (リクエスト、レスポンス) を提供します 5. XHR から分離され、ES 仕様の新しい実装方法です

以上が2020-05-24——ajax、axios、fetch の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。