Fetch和ajax的比较和区别
传统 Ajax 已死,Fetch 永生
Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR), 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise,推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise,需要使用 polyfill es6-promise 。 本文不是 Fetch API 科普贴,其实是讲异步处理和 Promise 的。Fetch API 很简单,看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHATWG Fetch 规范 Why FetchXMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。 Fetch 的出现就是为了解决 XHR 的问题,拿例子说明: 使用 XHR 发送一个 json 请求一般是这样: var xhr = new XMLHttpRequest(); 使用 Fetch 后,顿时看起来好一点 fetch(url).then(function(response) { 使用 ES6 的 箭头函数 后: fetch(url).then(response => response.json()) 现在看起来好很多了,但这种 Promise 的写法还是有 Callback 的影子,而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急,下面使用 async/await 来做最终优化:
try { duang~~ 的一声,使用 Promise,generator/yield,await/async 都是现在和未来 JS 解决异步的标准做法,可以完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise,为以后全面使用 async/await 做准备。 另外,Fetch 也很适合做现在流行的同构应用,有人基于 Fetch 的语法,在 Node 端基于 http 库实现了 node-fetch,又有人封装了用于同构应用的 isomorphic-fetch。
总结一下,Fetch 优点主要有:
Fetch 启用方法下面是重点↓↓↓ 先看一下 Fetch 原生支持率: 原生支持率并不高,幸运的是,引入下面这些 polyfill 后可以完美支持 IE8+ :
Fetch polyfill 的基本原理是探测是否存在 终于,引用了这一堆 polyfill 后,可以愉快地使用 Fetch 了。但要小心,下面有坑: Fetch 常见坑
竟然没有提到 IE,这实在太不科学了,现在来详细说下 IE IE 使用策略所有版本的 IE 均不支持原生 Fetch,fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理。 IE8, 9 的 XHR 不支持 CORS 跨域,虽然提供 Fetch 和标准 Promise 的不足由于 Fetch 是典型的异步场景,所以大部分遇到的问题不是 Fetch 的,其实是 Promise 的。ES6 的 Promise 是基于 Promises/A+ 标准,为了保持 简单简洁 ,只提供极简的几个 API。如果你用过一些牛 X 的异步库,如 jQuery(不要笑) 、Q.js 或者 RSVP.js,可能会感觉 Promise 功能太少了。 没有 DeferredDeferred 可以在创建 Promise 时可以减少一层嵌套,还有就是跨方法使用时很方便。 没有获取状态方法:isRejected,isResolved标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只允许外部传入成功或失败后的回调。我认为这其实是优点,这是一种声明式的接口,更简单。 缺少其它一些方法:always,progress,finallyalways 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过,暂不知道如何替代。 不能中断,没有 abort、terminate、onTimeout 或 cancel 方法Fetch 和 Promise 一样,一旦发起,不能中断,也不会超时,只能等待被 resolve 或 reject。幸运的是,whatwg 目前正在尝试解决这个问题 whatwg/fetch#27 最后Fetch 替换 XHR 只是时间问题,现在看到国外很多新的库都默认使用了 Fetch。 最后再做一个大胆预测:由于 async/await 这类新异步语法的出现,第三方的 Promise 类库会逐渐被标准 Promise 替代,使用 polyfill 是现在比较明智的做法。 |
Fetch和ajax的比较和区别的更多相关文章
- json和jsonp的区别,ajax和jsonp的区别
json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...
- git fetch和git pull之间的区别--转载
原文地址:http://blog.csdn.net/a19881029/article/details/42245955 git fetch和git pull都可以用来更新本地库,它们之间有什么区别呢 ...
- WebSocket和long poll、ajax轮询的区别,ws协议测试
WebSocket和long poll.ajax轮询的区别,ws协议测试 WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连 ...
- 小渣渣的json和jsonp和ajax的实质和区别
json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...
- Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...
- 使用 Fetch完成AJAX请求
使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般 ...
- 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR); This kind of functionality was previously achieved using XMLHttpRequest.
原生 JS Ajax,GET和POST 请求实例代码_javascript技巧_脚本之家 https://www.jb51.net/article/86157.htm 更新时间:2016年06月08日 ...
- ajax同步与异步的区别
jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...
- (转)git fetch + merge 和 git pull 的区别
转自:http://blog.csdn.net/a19881029/article/details/42245955 Git fetch和git pull都可以用来更新本地库,它们之间有什么区别呢? ...
随机推荐
- matplotlib 三维旋转
# 当elevation=0时,视角为沿x1负方向看,当elevation=90时,视角沿x3负方向看.# 当azimuth=0时,视角为沿x1负方向看,当azimuth=90时,视角沿x2负方向看. ...
- mysql 5.7 laravel json类型数据相关操作
2018年10月16日18:14:21 官方文档中文翻译版 原文:https://dev.mysql.com/doc/refman/5.7/en/json.html 最后有部分实例和一个小总结 11. ...
- 如何量化考核技术人的KPI?
对技术人来说,技术是成长的“核心”.然而,在实际工作协作中,技术的重要性常常被业务所掩盖,造成先业务后技术的现象. 针对这个痛点,阿里高级技术专家张建飞提出了自己的解决思路,希望能与大家一起探讨交流. ...
- 出现errSecInternalComponent
出现errSecInternalComponent Xcode签名机制(code signing mechanism) 的 bug, Xcode 中账号多了,就会产生很多过期的描述文件,Xcode 没 ...
- Multi-Projector Based Display Code ---- Calibration
Overview As mentioned previously, there are two main steps in generating a seamless display. The fir ...
- 无法登陆mysql user用户
- kubernetes in action - Pods
Pods 在上一篇也说明了,pods是kubernetes的最小部署单元,并且所有在pods中的container共享namespaces 那么为什么需要pods这样的概念? 因为在实际中,我们有一种 ...
- Go笔记
#Go在win下安装 1. https://golang.google.cn/dl/下载 amd64 版本的zip包 2. 解压后将bin目录添加入path 3. go version可显示版本信息
- ant安装报错:ANT_HOME is set incorrectly or ant could not be located. Please set ANT_HOME.
后来发现问题原因是没有设置classpath,或者是\的原因: 正确配置如下: ANT_HOME:D:\ant\apache-ant-1.10.5 CLASSPATH: %ANT_HOME%\lib ...
- ES6的Proxy和Reflect
Proxy 有一个原始的数据对象,通过代理出来一个新的对象,用户操作的是这个新的对象 { let obj ={ time:'2018-01-01', name:'lx' , _r:123 } let ...