Ajax、Fetch、Axios三者的区别

这篇具有很好参考价值的文章主要介绍了Ajax、Fetch、Axios三者的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

AJax

概念:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。是一种网络请求的概念框架。
主要特点:实现页面局部刷新,主要使用js的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>

Fetch

概念:使用ES6中提出的promise实现网络请求是Ajax的替代品,是真实存在的请求API。不是对Ajax的封装。
代码:

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

主要特点:

  1. 使用promise的方式进行网络请求,支持async / await;
  2. 采用模块化请求,语法简洁更加语义化,例如Request 、 Response,可读性较好;
  3. 脱离XHR,采用新的实现方式。

主要缺点:

  1. 只对网络请求错误进行reject,而对服务器返回的400或者500 都会被当做成功的请求;
  2. 不支持终端和超时处理,造成资源流量的浪费;
  3. 没办法监听请求的进度;
  4. 默认不会带cookie,需要手动添加配置;

Axios

概念:它是一个基于XHR二次进行封装的HTTP请求库;
代码:

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

主要特点:

  1. 浏览器端发起XMLHTTPRequest请求;
  2. node端发起http请求;
  3. 可进行请求终端;
  4. 可监听请求和返回;
  5. 支持Promise API;
  6. 可中断请求;
  7. 可自动转换json格式
  8. 客户端支持转换XSRF攻击;
  • axios和vue没关系,axios也不是随着Vue的兴起才广泛使用的,axios本身就是独立的请求库,跟用什么框架没关系;而且最初Vue官方推荐的请求库是vue-resouce,后来才推荐的axios;
  • axios不是xhr的子集,axios利用xhr进行了二次封装的请求库,xhr只是axios中的其中一个请求适配器,axios在nodejs端还有个http的请求适配器;axios = xhr + http

注意📢

axios和vue是没关系的,它并不是随着vue的兴起而被广泛使用的,而是axios本身就是一个独立的请求库,跟使用的框架并没有关系;最初vue官方推荐的请求库是vue-resouce,后来才推荐使用axios;axios是利用了xhr进行的二次封装库,xhr只是其中的一个http请求适配器;Axios = XHR + HTTP;文章来源地址https://www.toymoban.com/news/detail-852366.html

到了这里,关于Ajax、Fetch、Axios三者的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端如何中断请求 ( axios、原生 ajax、fetch)

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

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

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

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

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

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

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

    2024年02月11日
    浏览(67)
  • 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日
    浏览(63)
  • 前端数据处理:AJAX与Fetch API深入解析

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

    2024年02月21日
    浏览(36)
  • 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日
    浏览(40)
  • 前端学习--Ajax(3) XHR/axios

    1.1 概念 XMLHttpRequest(XHR)是一种用于在客户端和服务器之间发送HTTP请求的JavaScript API。它允许客户端在不重新加载整个页面的情况下向服务器发送请求,并根据服务器的响应更新页面的局部内容。Ajax是基于XHR封装的。 1.2 使用xhr发起get请求 步骤 创建XHR对象 调用XHR.open()函数

    2023年04月26日
    浏览(39)
  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(51)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包