創造を続け、成長を加速させましょう！「ナゲッツデイリーニュープラン・6月アップデートチャレンジ」に参加して5日目です。クリックしてイベントの詳細をご覧ください。

Ajax、Fetch、Axiosの違いを説明してください

経験豊富なフロントエンドとして、誰もAjax、Fetch、Axiosがそれをよく知っていると思いますが、3つの具体的な違いは何ですか？

柿のことを知らない人Ajax、Fetch、Axiosは、通りにしか行けません。ここではまず、理解に基づいて3つの違いについて説明します

プライマリバージョンの違い

3つすべてがネットワーク要求に使用されますが、緯度は異なります。スタック、キュー、配列と同じように、スタックとキューは論理構造であり、配列はデータ構造であり、2次元のものです。

Ajax（非同期JavaScriptおよびXML）：テクノロジーの総称。
- AJAXは新しいプログラミング言語ではありませんが、既存の標準を使用するための新しい方法です。web2.0で徐々に人気が出てきました
Fetch：は特定のAPIです
- リクエストやレスポンスなど、HTTPパイプラインの特定の部分にアクセスして操作するためのJavaScriptインターフェースを提供します

Axios：サードパーティのライブラリaxiosです-http.com/docs/intro

高度

XMLHttpRequestを使用したAjax

これは非常に基本的なトピックなので、紹介はしません。コードに移動するだけです。

/**
 * 
 * @param {*} url 请求地址
 * @param {*} successFn 回调参数
 */
function mockAjax(url, successFn) {
  const xhr = new XMLHttpRequest()
  xhr.open("GET", url, false)
  xhr.onreadystatechange =  () => {
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        successFn(xhr.responseText)
      }
    }
  }
  xhr.send(null)
}
复制代码

ここでは、XMLHttpRequestを使用してAjaxを実装しています。XMLHttpRequestは実際にはFetchに似たグローバルAPIです。

フェッチ

ネットワークリクエスト用のブラウザネイティブAPI
XMLHttpRequestのレベル。どちらもAPIです。
フェッチ構文はより簡潔で使いやすく、Promiseをサポートしています

コードデモ

function ajax2(url) {
  return fetch(url).then(res => res.json())
}
复制代码

案の定、後で出てきたものの方が使いやすいですよね？。。ハハハッハッハ

XMLHttpRequestを使用してAjaxを実装するか、Fetchを使用してAjaxを実装できます。したがって、Ajaxはテクノロジーの総称ですが、XMLHttpRequestとFetchは基本的なAPIであることに注意してください。

アクシオス

最も一般的に使用されるネットワークリクエストライブラリ（Vueの人気）
内部で利用可能なXMLHttpRequest、達成するためのフェッチ
サードパーティライブラリaxios-http.com/docs/intro

それに焦点を当てる（咳咳咳）

実際、Ajax、Fetch、Axiosの違いについては、それに答える方法を知っておく必要があります。

Ajaxテクノロジーをまとめて
ネイティブAPIを取得する
Axiosサードパーティライブラリ

それらはすべてネットワーク要求に関連しています。つまり、さまざまな次元です。