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的时候,我便接手 ...
随机推荐
- print
说一说这个print函数,我们经常使用,但有一些细节却往往错过了 print print()输出会换行是因为默认end="\n" 想要不换行,且覆盖 print("\r第 ...
- 在MacOS上使用gdb(cgdb)调试Golang程序
如果你在MacOS上使用GDB工具载入Golang程序时无法载入,这篇文章可以解决.本文不具体介绍调试的方法,网上的文章太多了就不赘述了. cgdb使用的是gdb的内核,方法和原理试用本文. 问题分析 ...
- Manjaro更新出现冲突
➜ ~ sudo pacman -Syyu :: Synchronizing package databases... core 147.5 KiB 1378K/s 00:00 [########## ...
- C# winform TreeView中关于checkbox选择的完美类[转]
http://www.cnblogs.com/kingangWang/archive/2011/08/15/2139119.html public static class TreeViewCheck ...
- R: 修改镜像、bioconductor安装及go基因富集分析
1.安装bioconductor及go分析涉及的相关包 source("http://bioconductor.org/biocLite.R") options(BioC_mirr ...
- 斯坦福大学公开课机器学习: machine learning system design | prioritizing what to work on : spam classification example(设计复杂机器学习系统的主要问题及构建复杂的机器学习系统的建议)
当我们在进行机器学习时着重要考虑什么问题.以垃圾邮件分类为例子.假如你想建立一个垃圾邮件分类器,看这些垃圾邮件与非垃圾邮件的例子.左边这封邮件想向你推销东西.注意这封垃圾邮件有意的拼错一些单词,就像M ...
- windows c语言 网络
WORD wVersionRequested; WSADATA wsaData; int err; wVersionRequested = MAKEWORD(2, 2); err = WSAStart ...
- Mock1 moco框架的基本介绍
前言: Mock就是模拟接口的,一般在开发人员还没有开发完接口,但是有接口文档,这个时候就可以执行接口测试,前端同学也可以用mock功能给自己使用. 功能:可以模拟http协议发送请求 下载链接:ht ...
- JAVA设计模式初探之适配器模式
http://blog.csdn.net/jason0539/article/details/22468457 1. 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接 ...
- Windows Server 2003 添加“Resin”到“服务”出错
将“Resin”添加到[服务] 进入安装目录,执行 httpd -install 从[服务]移除 执行 httpd -remove ---------------------------------- ...