axios和ajax,fetch的区别
1,传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。经过多年的更新维护,真的已经是非常的方便了,优点无需多言;如果是硬要举出几个缺点,那可能只有:
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发,XHR本身的架构不清晰。
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
4.不符合关注分离(Separation of Concerns)的原则
5.配置和调用方式非常混乱,而且基于事件的异步模型不友好。
2.axios 它本身具有以下特征:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
3.fetch
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
fetch的优点:
1.符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
坦白说,上面的理由对我来说完全没有什么说服力,因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好,使用起来也足够方便,为什么我们还要花费大力气去学习fetch?
我认为fetch的优势主要优势就是:
1. 语法简洁,更加语义化
2. 基于标准 Promise 实现,支持 async/await
3. 同构方便,使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4.更加底层,提供的API丰富(request, response)
5.脱离了XHR,是ES规范里新的实现方式
最近在使用fetch的时候,也遇到了不少的问题:
fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。
例如:
1)fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
2)fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: 'include'})
3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
4)fetch没有办法原生监测请求的进度,而XHR可以
axios和ajax,fetch的区别的更多相关文章
- axios与ajax的区别及优缺点
区别:axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的a ...
- Axios 取消 Ajax 请求
Axios 取消 Ajax 请求 Axios XMLHttpRequest https://caniuse.com/?search=XMLHttpRequest https://developer.m ...
- 普通请求和ajax请求的区别
普通请求和ajax请求的区别? 下面的action返回一个json文件,文件内容为sts.*,data1
- angular 和jq 的AJAX的请求区别
最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...
- backbone中get和fetch的区别
我也是刚开始接触backbone.js对于里面的很多东西都看过,但是具体在使用起来还是有很多问题,其中一个就是get和fetch的区别,这个让我很纠结,都是获取模型的数据,干嘛要有两个呢?最近好像弄明 ...
- Axios发送AJAX请求
目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...
- axios 或 ajax 请求文件
axios 或 ajax 请求文件 axios({ url: path + '/monitor/exportPicture' + '?access_token=' + getToken(), meth ...
- axios 与 Jquery-ajax 的使用区别
axios 和 ajax 的使用方法基本一样,只有个别参数不同: 附:axios 中文文档 一.axios axios({ url: 'http://jsonplaceholder.typicode. ...
- git pull和fetch的区别
详解git pull和git fetch的区别: - weixin_41975655的博客 - CSDN博客 https://blog.csdn.net/weixin_41975655/article ...
- vue使用axios进行ajax请求
以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...
随机推荐
- javax.swing.JComponent 调用顺序
网上截取的,感觉挺有用,记录下来. http://bbs.csdn.net/topics/310041707 java swing 感觉好复杂啊…………一点都不想用但是作业要用到 >_<; ...
- 把IDEA中新建的项目提交到Github仓库中
对于一个没有进行任何版本控制设置的idea工程,使其支持Github,设置步骤如下 到Git官网下载Git的安装包,安装好以后,Git的安装目录下的文件结构应该如下图所示 在IDEA开发工具中配置Gi ...
- cocos2d-x 的api
最近,在学习cocos2d-x,发现没有一个很好的api手册.因为起初我们学习一些例子之类的内容,会很容易使用,也很容易明白,但是当我们需要用新的api的时候,第一就会疑问有没有这个api,比如:你使 ...
- VS断点不生效
工程属性页中“配置属性”->“C/C++”->“常规”->“调试信息格式”,选择“用于“编辑并继承”的程序数据库(/ZI)”. 在“配置属性”->“链接器”->“调试”- ...
- MYSQL 升序排序但值为0的排最后
转载 http://blog.csdn.net/looksun/article/details/51445205 如一张表的数据如下: 需要根据gz列的值进行升序排序,但值为0的排在最后面,即最终结果 ...
- npm创建react项目
1:win+R 输入cmd ,打开cmd面板 2:安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3:安装r ...
- 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.1.类文件结构
无关性 无关性的体现有两个方面: 1.平台无关性:可在不同的操作系统和机器指令集上执行,可在不同厂商的虚拟机平台上执行. 2.语言无关性:用不同编程语言写出的代码编译生成的文件都可以运行. 实现思想: ...
- 如何在两个月的时间内发表一篇EI/SCI论文-我的时间管理心得
在松松垮垮的三年研究生时期,要说有点像样的成果,也只有我的小论文可以谈谈了.可能有些厉害的角色研究生是丰富而多彩的,而大多数的同学在研究生阶段可能同我一样,是慢悠悠的渡过的,而且可能有的还不如我,我还 ...
- 如何用jstl的select标签做二级联动下拉列表框??
下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...
- 二·安装Subversion(基于Centos7)
1.在网站http://archive.apache.org/dist/subversion/中下载对应的版本,我的操作系统是centos, 所以我下载了Linux generic版本subversi ...