Ajax、Fetch、Axiosの違いを知っていますか？

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して4日目です。クリックしてイベントの詳細を表示。

序文

フロントエンドの開発パートナーは、「リクエスト」という言葉から切り離せないものでなければなりません。これは、バックエンドとやり取りするための最も重要な方法です。過去数年間のインタビューで、インタビュアーが尋ねたがった質問の1つは、インタビュアーにAjaxを実装するためのコードを引き裂かせることです。多くの小さなパートナーがそれに遭遇したに違いないと思います。今日まで、リクエストについて多くの新しい名詞がありましたが、今日はこれらの新しい名詞の違いについて説明します。

これらの名詞に共通するもの：これらはすべて、ネットワーク要求を送信するために使用されます。

1.Ajax

そのフルネームは次のとおりです。非同期JavaScriptおよびXML。これは「非同期JavascriptおよびXML」に変換されます。

多くの小さなパートナーは、Ajaxがリクエストを送信する方法であると誤解したり、XMLHttpRequestをAjaxと同一視したりする可能性があります。実際、これは間違っており、一方的なものです。

正解：

Ajaxは、テクノロジーと概念モデルの総称であり、多くのテクノロジーを含み、特定のテクノロジーを指すものではありません。その重要な機能の1つは、ページを部分的に更新できるようにすることです。

特徴：

ページ全体をリロードせずに、ページを部分的に更新します。

簡単に言えば、Ajaxはアイデアであり、XMLHttpRequestはAjaxを実装するための単なる方法です。その中でも、XMLHttpRequestモジュールはAjaxを実装するための優れた方法です。これは、多くのインタビュアーがインタビュアーに手で引き裂かせたいコードの1つでもあります。

Ajaxは、XMLHttpRequestモジュールを使用して実装されます。

サンプルコード：

<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')
  </script>
</body>
复制代码

出力結果：

ここでは、XMLHttpRequestモジュールを使用して最も単純なgetnetworkリクエストが実装されています。

注：このメソッドを使用してネットワークリクエストを実装する場合、リクエストにループ内にリクエストが含まれていると、コールバック地獄が発生します。これも批判であり、後でより洗練されたリクエストメソッドが生まれました。

2.フェッチ

FetchはES6に登場し、ES6によって提案されたpromiseオブジェクトを使用します。これはXMLHttpRequestの代わりです。

很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

正解：

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

特点：

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。

所以这里就和 Ajax 又很大不同了，一个是思想，一个是真实存在的 API，不过它们都是用来给网络请求服务的，我们一起来看看利用 Fetch 实现网络请求。

示例代码：

<body>
  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>
</body>
复制代码

输出结果：

上段代码利用 Fetch 发送了一个最简单的 get 请求，其中最重要的特点之一就是采用了.then 链式调用的方式处理结果，这样不仅利于代码的可读，而且也解决了回调地狱的问题。

3.Axios

Axios 是随着 Vue 的兴起而被广泛使用的，目前来说，绝大多数的 Vue 项目中的网络请求都是利用 Axios 发起的。当然它并不是一个思想，或者一个原生 API，它是一个封装库。

正解：

Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。

特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

所以说，Axios 可以说是 XHR 的一个子集，而 XHR 又是 Ajax 的一个子集。既然说它是一个库，那么我们在使用的时候就需要引入它。

示例代码：

// 发送 POST 请求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
复制代码

总结

Ajax、Fetch、axios三者之间的关系可以用一张图来清晰的表示，如图：

三者做个对比：

网络请求	特点
Ajax	一种技术统称，主要利用XHR实现网络请求
Fetch	具体API，基于promise，实现网络请求
Axios	一个封装库，基于XHR封装，较为推荐使用