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的时候,我便接手 ...
随机推荐
- Balanced Sequence HDU - 6299(杭电多校1 B)
题目说要n个字符串串内随意组合以后将这些串放在一起,然后求最长的括号匹配的长度,并不要求是连续的 因为不需要是连续的,所以可以先把已经匹配好的括号加入到答案里面去,先把这些删掉,以为并不影响结果,然后 ...
- NOI2009管道取珠(dp)
题意:给定两列球,可以从任意一列球的末尾弹出一个球,最后会得到一个序列,设第i种序列可以被a[i]种操作产生,那么会产生a[i]^2的贡献,求贡献和. Solution: 首先我们观察a[i]^2的含 ...
- 2019 校内赛 RPG的天赋分支(贪心)
Problem Description 很多游戏都有天赋树的概念,天赋树的不同分支具有不同的属性加成,那么合理选择分支就非常重要了.Luke最近沉迷一款RPG游戏,它的天赋树机制如下:角色具有n个可选 ...
- poj3190 Stall Reservations
我一开始想用线段树,但是发现还要记录每头cow所在的棚...... 无奈之下选择正解:贪心. 用priority_queue来维护所有牛棚中结束时间最早的那个牛棚,即可得出答案. 注意代码实现的细节. ...
- JS(基础)_总结获取页面中元素和节点的方式
一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式 二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签 结点:页面 ...
- opencv源码学习: getGaussianKernel( 高斯核);
参考: https://blog.csdn.net/u012633319/article/details/80921023 二维高斯核, 可以根据下面的公式推到为两个一维高斯核的乘积: 原型: /** ...
- mysql常用快速查询修改操作
mysql常用快速查询修改操作 一.查找并修改非innodb引擎为innodb引擎 # 通用操作 mysql> select concat('alter table ',table_schema ...
- 2017-12-15python全栈9期第二天第五节之while else的用法二当不被break打断时else内容的结果会被打印
#!/user/bin/python# -*- coding:utf-8 -*-count = 0while count <=5 : count += 1 if count == 3 : pas ...
- SQL优化笔记一:索引和explain
目录 为什么需要优化SQL SQL优化的重点 索引 索引的结构 索引的优缺点总结: 索引的分类 索引操作 B树 实战 问题 数据库方面,我会使用MySQL来讲解 为什么需要优化SQL 性能低,执行时间 ...
- parseFloat()为什么没有效果
parseFloat() 函数可解析一个字符串,并返回一个浮点数.看清楚说明是操作字符串,如果是数值类型parseFloat([],x)会失去效果. 正确的用法:parseFloat().toFixe ...