js:ajax、axios、fetch的区别
原生ajax
核心 XMLHttpRequest(XHR)
缺点:
写法复杂,回调地狱等等
jquery ajax
JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。
缺点:
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发,XHR本身的架构不清晰。
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
4.不符合关注分离(Separation of Concerns)的原则
5.配置和调用方式非常混乱,而且基于事件的异步模型不友好。
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范
优点:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax
fetch
fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
Fetch是基于promise设计的
缺点:
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可以
相关文章
- Web基础 HTML CSS JS JQuery AJAX
- 【面试】吃透了这些Redis知识点,面试官一定觉得你很NB(干货 | 建议珍藏) c#自定义Attribute获取接口实现 纯JS ajax 聊聊DataTable下载 二进制数据的序列化反序列化和Json的序列化反序列化的重要区别
- c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码,java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法(ajax调用) Linq To Json SqlServer 递归查询
- 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
- JS AJAX跨域详解,支持get和post请求
- Jquery和JS用外部变量获取Ajax返回的参数值!(超简单)
- jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
- js中的call()和apply()和bind()方法
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
- js用img代替ajax js心跳 向服务器定时传送参数 主要计算用户在线时长
- js添加收藏夹
- 浅析 x1B[1;3;31mxterm.jsx1B[0m 是什么?如何在终端输出带颜色等格式的字符串
- 解决AJAX跨域:1、利用JSONP;2、JS设置Header
- 原生js Ajax
- 原生js版ajax请求
- MVC中用View.bag保存json字符串。在js中使用,不用ajax请求。。。。
- Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 简单dotScreen 屏幕点效果
- 前端自学笔记:JSON、JSONP和JS之间的区别,Ajax、axios和jsonp的区别
- 原生js实现的ajax请求
- JS原生Ajax和jQuery的Ajax与代码示例-ok