ajax、fetch与axios三者的联系与差异？

最新推荐文章于 2024-10-12 11:10:30 发布
最新推荐文章于 2024-10-12 11:10:30 发布
阅读量369 收藏 1
点赞数
文章标签： ajax javascript 前端 前端框架 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WWEIZAI/article/details/126450091
版权

ajax、fetch与axios三者的联系与差异？

① ajax、fetch与axios是什么，有什么特点？

AJAX

AJAX 特点

是一种特别的http请求, 对服务器端来说, 没有任何区别, 区别在浏览器端

全称为Asynchronous Javascript And XML，就是异步JavaScript和****XML在浏览器中向服务器发送异步请求

最大优势：无刷新获取数据 (局部刷新页面)

Ajax不足点

多个请求之间如果有先后关系的话，就会出现回调地狱

传统 Ajax 原生写法结构比较混乱，不符合关注分离的原则

干掉了Back和History功能，即对浏览器机制的破坏

Fetch

Fetch 特点

是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案；fetch是原生JS

相比传统 Ajax 原生结构比较混乱的写法，fetch被设计成更具可扩展性和高效性

Fetch API 是浏览器自带的 API，且它是基于标准 Promise

fetch实例

Fetch 不足有点多

fetch只对网络请求报错，对400，500都当做成功的请求

fetch默认不会带cookie，需要自行添加配置项

fetch不支持abort，不支持超时控制

fetch没有办法原生监测请求的进度

Axios

Axios （ 简单实用 - 尤雨溪大神推荐使用 ）

是对原生XHR的一种封装，是Promise实现版本（基于xhr + promise的异步ajax请求库 ）

因此支持promise API

同一套代码可以运行在浏览器和 node.js 中

在客户端则使用 XMLHttpRequests

在服务端使用原生 node.js中 http模块

可以在请求和响应阶段统一设置，进行拦截 （ajax、fetch是不支持的）

② 三者的关系

Ajax 是一种代表异步 JavaScript + XML 的模型（技术合集）

Fetch 也是 Ajax 的一个子集

Axios 属于传统 Ajax（XHR）的子集，因为它是基于 XHR 进行的封装

喂你吃口饭吧~
关注
电商业务技术基础知识&电商业务中常用的大数据技术介绍
AI天才研究院
09-22 1156
电商（E-commerce）网站是指在线零售活动平台，基于互联网、传统的商务渠道、移动支付、物流配送等多种商业模式的综合体，通过提供网络购物环境、网络交易功能、物流服务和相关信息的服务型网站，帮助消费者通过电脑、手机或其他终端进行商品的购买、销售和交流，促进个人及商户的经济活动。作为一种新兴的服务型网站类型，电商网站的运营、开发、维护都面临着诸多新的技术挑战，包括大数据分析、高并发处理、安全防范、存储与查询、搜索引擎优化、站群管理、服务器资源配置等。
2023年前端面试汇总-React
越陌度阡
06-29 886
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
axios 底层是ajax吗,说说axios、ajax、fetch的关系
weixin_36134871的博客
08-05 1253
axios 和 ajax 都是对XMLHttpRequest这个对象的封装；而 fetch 则是window下的一个方法，是一个更底层的方法。ajax其实重点就是首先实例一个XMLHttpRequest对象，用其中的 open 方法建立连接； send 方法传输数据(前端传到后台)；然后再利用 onreadystatechange 监听readyState的变化，当其为 4 时，代表请求完成；实...
ajax、axios、fetch之间的详细区别以及优缺点
热门推荐
毛毛虫博客
06-06 6万+
个人网站https://iiter.cn程序员导航站开业啦，欢迎各位观众姥爷赏脸参观，如有意见或建议希望能够不吝赐教！ 将jQuery的ajax、axios和fetch做个简单的比较，所谓仁者见仁智者见智，最终使用哪个还是自行斟酌 1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dat...
axios与ajax的关系,fetch、axios 与Ajax之间关系
weixin_39792686的博客
08-06 488
一、axios底层封装是XMLHttpRequest对象，实现原理跟ajax同样， 经过封装Promise()对象来处理结果例子以下： 封装Axios对象进行回调 get方法var axios = {getMethod:function(url){var xhr = new XMLHttpRequest()reture Promise((resolve,reject)=>{xhr.open(...
ajax、axios、fetch之间的区别与联系
qq_32614411的博客
12-20 598
整理ajax、axios、fetch优缺点 简单总结 JavaScript是一门前端语言 AJAX是一门技术，它提供了异步更新的机制，使客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 jQuery是一个框架，它对JavaScript进行了封装，使得JavaScript更加方便使用。jQuery使得JavaScript和AJAX的使用更加方便。 AJAX https://w...
ajax、axios、fetch之间的区别与联系，web前端开发教学视频
radcb55226的博客
04-03 304
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取前端）**正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取资料领取方式：点击这里前往免费获取。
前端面试必备：JS核心知识点与面试题解析
涵盖了ES5与ES6的继承方式差异、Generator的使用、Promise的实现及优缺点、观察者模式、bind方法实现、各种继承方式的模拟、CSS菊花图、HTTP状态码、Object.create的功能、async/await的理解、算法和数据结构、JSONP...
【Python Forms库与其他前端技术的整合】：React或Vue.js的完美结合
Python Forms库简介与核心概念 Python Forms库是Python语言的一个扩展库，主要用于开发网络应用的表单处理功能。尽管它不像Django或Flask那样拥有如此广泛的知名度，但Forms库提供的简洁语法和强大的功能，让表
三年经验前端vue面试记录
bb_xiaxia1998的博客
10-31 4907
分析中两个重要组件和，分别起到导航作用和内容渲染作用，但是回答如何生效还真有一定难度回答范例包括以下几个模块回答范例思路回答范例可能的追问可以分来以下三种：1. 默认插槽子组件用标签来确定渲染的位置，标签里面可以放结构，当父组件使用的时候没有往插槽传入内容，标签内结构就会显示在页面父组件在使用的时候，直接在子组件的标签内写入内容即可子组件 父组件 2. 具名插槽子组件用属性来表示插槽的名字，不传为默认插槽父组件中在使用时在默认插槽的基础上加上属性，值为子组件插槽属性值子组件 父组件 3. 作用域插槽子组件在
前端请求大比拼：Fetch、Axios、Ajax、XHR
dfc_dfc的博客
08-13 3130
前端请求大比拼：Fetch、Axios、Ajax、XHR
ajax和fetch、axios三者的区别
m0_68359121的博客
06-09 2111
1.Ajax 它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。 很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。 正解： Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。 特点： 局部刷新页面，无需重载整个页面。 简单来说，Ajax 是一种思想，XM
axios与 fetch 封装请求，二选一
GotYoung的博客
05-01 757
axios与 fetch 区别： axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。 axios特点： 1.从浏览器中创建 XMLHttpRequest 2.支持 Promise API 3.客户端支持防止CSRF 4.提供了一些并发请求的接口（重要，方便了很多的操作） 5.从 node.js 创建 http 请求 6.拦截请求和响应 7.转换请求和响应数据 8.
Ajax、Fetch、Axios三者的区别
00后的程序员
03-09 223
注意：Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱。
fetch 和axios有哪些差异
weixin_35755562的博客
12-16 362
fetch 和 axios 是两种不同的网络请求库，它们都可以用来向服务器发送 HTTP 请求。但是它们之间有一些差异： 兼容性：fetch 是由浏览器提供的一种原生方法，但是并不是所有浏览器都支持，所以在使用 fetch 的时候需要注意兼容性问题。而 axios 是基于 XHR (XMLHttpRequest) 实现的，所以在使用 axios 的时候不用担心兼容性问题。 使用方式：fetch...
【网络基础】简单梳理XHR、ajax、axios与fetch之间的关系
庞囧的博客
07-25 1118
文章目录前言关系axios基础写法Fetch基础写法 前言 非使用教学，只是给会用这三者的人留个关系印象。 关系 首先要知道，这些异步请求方法之间的关系是怎么样的： 浏览器环境中其实有两个和ajax有关的对象，一个是XHR一个是Fetch，其中JQ的ajax部分和axios的实现都是源于XHR的封装，而Fetch是与XHR同级别的后出的ajax方法。 axios基础写法 来个get请求看看个大概： axios.get('url').then( response => { // 请求成功
Fetch和Axios到底有什么区别
weixin_48309048的博客
08-25 8393
Fetch和Axios到底有什么区别
jQuery 中的 Ajax 详解
最新发布
zz130428的博客
10-12 922
众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。
前端开发攻略---使用AJAX监控网络请求进度
nibabaoo的博客
10-11 321
使用AJAX监控网络请求进度
ajax fetch axios
04-27
AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XML（现已更改为JSON）进行异步数据通信的技术，可在不刷新整个页面的情况下部分更新网页内容。然而，AJAX只是用来发送请求和接收响应的技术，需要使用其他技术（如DOM操作）对数据进行解析和呈现。由于其语法相对繁琐且不太便于维护，后续的技术逐渐发展出现。 Fetch是Web API的一部分，用于在浏览器中进行网络请求。Fetch有着更加简洁和直观的语法，支持 Promise，在处理错误、取消请求等方面也有更好的表现。同时，Fetch支持流式处理而无需将响应存储在内存中，可以减少内存占用。 Axios是一个使用Promise基于XMLHttpRequest和fetch进行HTTP请求的JavaScript库。它具有更加直观和简洁的API，对于错误处理、取消请求等方面也有更好的表现。Axios也有一些其他的特性，如请求和响应的拦截器、默认的配置选项、CSRF保护等。由于其语法简单易用，使用较为广泛。 综上所述，Fetch和Axios都比传统的AJAX更加简单直观、易于维护，因此已经成为当今最为流行的前端数据请求解决方案之一。但是，在选择具体的技术时，需要根据具体的项目需求和开发经验来做出决策。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值