Fetch诞生记
Fetch作用?
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局
fetch()
方法,该方法提供了一种简单,合乎逻辑的方式来跨网络异步获取资源。这种功能以前是使用
XMLHttpRequest
实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如Service Workers
。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如 CORS和HTTP的扩展。
let myImage = document.querySelector('img'); fetch('flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
演变过程:
ajax时代:
http://api.jquery.com/jQuery.get/
此处是jquery封装,如果是原始接口, 则更加复杂。 但是让然需要 以回调函数形式处理 资源返回 结果。
$.get( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
http://api.jquery.com/jQuery.getScript/
请求个脚本后,然后执行脚本加载后的业务代码。 例如加载的某个jquery插件, 然后才能使用此插件。
var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() {
$( "#go" ).click(function() {
$( ".block" )
.animate({
backgroundColor: "rgb(255, 180, 180)"
}, 1000 )
.delay( 500 )
.animate({
backgroundColor: "olive"
}, 1000 )
.delay( 500 )
.animate({
backgroundColor: "#00f"
}, 1000 );
});
});
其实现原理类似如下文章介绍。
https://friendlybit.com/js/lazy-loading-asyncronous-javascript/
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
Promise+ajax
http://www.cnblogs.com/iamzhanglei/archive/2013/05/05/3060640.html
function xhr(options) { var promise = Promise(), req = new XMLHttpRequest(); req.open(options.method || 'GET', options.url, true); // Set request headers if provided. Object.keys(options.headers || {}).forEach(function (key) { req.setRequestHeader(key, options.headers[key]); }); req.onreadystatechange = function (e) { if (req.readyState !== 4) { return; } if ([200, 304].indexOf(req.status) === -1) { promise.reject('Server responded with a status of ' + req.status); } else { promise.resolve(e.target.result); } }; req.send(options.data || void 0); return promise; }
使用:
xhr({ url: "xxx.php?a=xxx" }).then(function (msg) { })
此方法为Promise 和 xhr的结合体, 消除了xhr的回调函数。 但是还是有效率问题。因为其实上层组合, 如果是 js 平台实现此功能, 则效率会有提升。
Fetch 诞生:
http://www.cnblogs.com/parry/p/using_fetch_in_nodejs.html
在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。
现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求。
https://segmentfault.com/a/1190000003810652
XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json'; xhr.onload = function() {
console.log(xhr.response);
}; xhr.onerror = function() {
console.log("Oops, error");
}; xhr.send();
使用 fetch后:
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
Fetch Polyfill
https://github.com/github/fetch
window.fetch polyfill
The
fetch()
function is a Promise-based mechanism for programmatically making web requests in the browser. This project is a polyfill that implements a subset of the standard Fetch specification, enough to makefetch
a viable replacement for most uses of XMLHttpRequest in traditional web applications.This project adheres to the Open Code of Conduct. By participating, you are expected to uphold this code.
Fetch诞生记的更多相关文章
- 痞子衡嵌入式:语音处理工具Jays-PySPEECH诞生记 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生. 智能语音交互市场近年来发展迅速,其典型的应用之一智能音箱产品如今已走入千家万户,深受大家 ...
- 痞子衡嵌入式:串口调试工具Jays-PyCOM诞生记 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是串口调试工具Jays-PyCOM诞生. 串口调试助手是嵌入式开发里非常常用的小工具,市面上有非常多流行的串口调试工具,比如TeraTe ...
- chain33 区块链开发框架诞生记
chain33 诞生记 很多年没有写博客了,应该说,自从2013年开始玩比特币,就没有写过了.这5年来,做了很多事情,也见了很多以前做梦都没有想到过都事情.我做的最开心的事情,也是觉得最有意义的事情, ...
- 谷歌Gmail诞生记:十年回首
美国<时代>周刊网络版今天刊登题为<Gmail诞生记:10年前鲜为人知的故事>(How Gmail Happened: The Inside Story of Its Laun ...
- Linux LiveCD 诞生记
Linux LiveCD 诞生记 650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic ...
- (转载)JavaScript世界万物诞生记
一. 无中生有 起初,什么都没有.造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办?有一个声音说:不是有null嘛?另一个声音说:可是null代 ...
- 痞子衡嵌入式:语音处理工具pzh-speech诞生记(2)- 界面构建(wxFormBuilder3.8.0)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具pzh-py-speech诞生之界面构建. 之前痞子衡设计过一个串口调试助手pzh-py-com,也专门写过一篇关于其界面构 ...
- [转载]jQuery诞生记-原理与机制
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3520 一.看似偶然的 ...
- 【Android测试】【随笔】性能采集工具——小松鼠诞生记
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4945066.html 起因 去年刚加入TX的时候,我便接手 ...
随机推荐
- 构建SSH服务
什么是SSH?简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露.最 ...
- [POI2012]STU-Well(二分答案+神仙操作)
给定一个非负整数序列A,每次操作可以选择一个数然后减掉1,要求进行不超过m次操作使得存在一个Ak=0且max{|Ai−Ai+1|}最小,输出这个最小lk以及最小值. Solution 最大值最小,显然 ...
- POJ--3259 Wormholes (SPFA判负环)
题目电波 3259 Wormholes #include<iostream> #include<cstring> #include<algorithm> #in ...
- NoSQL还是SQL?这一篇讲清楚
https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653550127&idx=1&sn=93f79e007d757a ...
- 如何设计出优秀的Restful API?
https://mp.weixin.qq.com/s?__biz=MzU0OTE4MzYzMw==&mid=2247485240&idx=1&sn=b5b9c8c41659d2 ...
- 区块链使用Java,以太坊 Ethereum, web3j, Spring Boot
Blockchain is one of the buzzwords in IT world during some last months. This term is related to cryp ...
- P3378 堆の模板
如果不是可并堆/带修堆/卡常题,一般都用优先队列实现. 很多O(nlogn)过不了的题都可以用蚯蚓的套路来实现!!! 优先队列带修用延迟删除法. 堆,可以简单的用优先队列来实现,也可以自己手打. #i ...
- IT项目管理分享7个开源项目管理工具
在一项调查中,有 71% 的组织表示他们在开发过程中会用到敏捷方法. 此外,用敏捷方法管理项目比传统方法管理项目成功率高 28%.在这次工具推荐中,我们从一些比较受欢迎的开源项目管理工具中摘取了支持敏 ...
- assert的使用
1.eclipse.myeclipse开启assert(断言),默认是关闭,如下: 说白了就是设置一下jvm的参数,参数是-ea或者-enableassertions 2.assert格式 (1)as ...
- mybatis下载地址(所有版本)
https://github.com/mybatis/mybatis-3/releases,这个github里面几乎包含了所有的没有batis