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

这篇具有很好参考价值的文章主要介绍了【学一点儿前端】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>

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>

上段代码利用 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);
  });

总结

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

易混淆点以及注意点文章来源地址https://www.toymoban.com/news/detail-723420.html

  1. xhr是ajax的一种实现
  2. fetch应该和xhr作比较,不能和ajax和axios做比较
  3. axios和fetch都基于promise
  4. fetch使用了关注分离的设计思想(请求和响应结果分开处理)
  5. axios目前也支持fetch

到了这里,关于【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • JS面试题之ajax、axios、fetch的区别

    AsynchronousJavascriptAndXML 异步JavaScript和XML 它是一种创建 交互式 网页应用的 网页开发技术 。 它是一种在 无需重新加载整个网页 的情况下,能够 更新部分网页 的技术。 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。 这意味着可以在不重新加载整个网页

    2023年04月23日
    浏览(67)
  • 前端如何中断请求 ( axios、原生 ajax、fetch)

    使用场景 在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景: 比如 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这

    2024年02月04日
    浏览(50)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(56)
  • ajax和fetch的区别

    ajax 和 fetch的相同点和区别是什么? 以前我们都用ajax去做请求, 但是原生的ajax不好用,我们会用$.ajax或者axios插件去请求,他们都是ajax的封装 最近出来个fetch是什么? 问到这里的时候,你就已经入坑了, 因为 ajax只是一个异步xhr解决方案的概念,不能和fetch这个api同日而语

    2024年02月11日
    浏览(64)
  • fetch、axios 和 XMLHttpRequest的区别

    官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest XMLHttpRequest (XHR) 是一种在客户端和服务器之间进行异步数据交换的技术,它允许浏览器向服务器发送HTTP请求,获取数据并更新部分网页内容,而无需刷新整个页面。XHR 是现代Web开发中常用的一种技术,用于实现AJA

    2024年01月16日
    浏览(34)
  • Vue中如何使用Ajax请求是通过第三方库axios或者原生的fetch API来实现的

    在Vue中使用Ajax请求通常是通过第三方库,比如axios或者原生的fetch API来实现的。这里我将为你展示如何使用axios库在Vue中进行Ajax请求。 首先,你需要安装axios库。你可以通过npm或者yarn来安装: 使用npm: bash     复制 npm install axios 或者使用yarn: bash 复制 yarn add axios 安装完成后

    2024年04月13日
    浏览(58)
  • 前端数据处理:AJAX与Fetch API深入解析

    前端数据处理是Web开发中不可或缺的一部分,它涉及到如何从服务器获取数据,并将其转换为易于处理的格式。AJAX和Fetch API是两种常用的前端数据处理技术,它们都允许开发人员在不重新加载整个页面的情况下更新部分页面内容。AJAX(Asynchronous JavaScript and XML)是一种异步请求

    2024年02月21日
    浏览(34)
  • 前端网络请求之JavaScript XHR、Fetch、Axios

    AJAX:一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。在不重新加载整个网页的情况下,对网页的某部分进行更新 Fetch:基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多。fetch 不是 aj

    2024年01月23日
    浏览(48)
  • ajax和axios有什么区别?

    1、ajax和axios有什么区别? ajax特点:     1.异步的XML和JavaScript     2.可以运行浏览器 不可以运行在node     3.发送给后台数据需要手动转换 请求头手动设置     4.后端响应的数据需要自己转换/json格式 axios特点:     1.基于promise的http库     2.可以调用promise的api     3.axi

    2024年02月08日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包