• 【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

    省流读法

    ajax是js异步技术的术语，早期相关的api是xhr，它是一个术语。
    fetch是es6新增的用于网络请求标准api，它是一个api。
    axios是用于网络请求的第三方库，它是一个库。

    1.Ajax

    它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。
    很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。

    正解：

    Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

    特点：

    局部刷新页面，无需重载整个页面。

    简单来说，Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式，这也是很多面试官喜欢让面试者手撕的代码之一。
    利用 XMLHttpRequest 模块实现 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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    2.Fetch

    Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。
    很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

    正解：

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

    特点：

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

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

    3.axios

    Axios 是用于发出网络请求的第三方 HTTP 客户端库。绝大部分使用基于xhr封装，截止文章编写时间也已经支持fetch，可以在浏览器和 Node.js 中使用。它提供了更高级别的封装，使发送请求和处理响应更加简单和灵活。axios 支持以简洁的方式设置请求参数、处理请求和响应拦截器，并提供了更好的错误处理和取消请求的支持。

    正解：

    Axios 是用于发出网络请求的第三方 HTTP 客户端库。

    特点：

    使用 Promise 对象来处理异步请求的结果，可以更加方便地进行链式调用和错误处理。

    axios示例代码

    axios.get('https://api.example.com/data')
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.log(error);
  });


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    总结

    ajax是js异步技术的术语，早期相关的api是xhr，它是一个术语。
    fetch是es6新增的用于网络请求标准api，它是一个api。
    axios是用于网络请求的第三方库，它是一个库。

    易混淆点以及注意点

    1. xhr是ajax的一种实现
    2. fetch应该和xhr作比较，不能和ajax和axios做比较
    3. axios和fetch都基于promise
    4. fetch使用了关注分离的设计思想（请求和响应结果分开处理）
    5. axios目前也支持fetch
  • 相关阅读:
    ElasticSearch (ES)学习之路（六）Springboot2.3.1整合ES 7.6.1
    C#基础进阶
    基于Python实现的特征选择的遗传算法（GA）
    参数化建模 vs. 直接建模【CAD】
    Electron使用指南之初体验
    【二叉树】- 迭代遍历（ js 实现前、中、后序）
    解决下载中文文件名乱码问题
    const char *p,char const *p和char *const p区别
    【自学开发之旅】基于Flask的web开发（一）
    nacos配置启动
  • 原文地址：https://blog.csdn.net/fangyuan__/article/details/133861806