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/

<script src="http://yourdomain.com/script.js"></script>
使用伪ajax方式获取:
(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 开发的时候,如我之前介绍的 IonicReact 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 make fetch 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诞生记的更多相关文章

  1. 痞子衡嵌入式:语音处理工具Jays-PySPEECH诞生记 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生. 智能语音交互市场近年来发展迅速,其典型的应用之一智能音箱产品如今已走入千家万户,深受大家 ...

  2. 痞子衡嵌入式:串口调试工具Jays-PyCOM诞生记 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是串口调试工具Jays-PyCOM诞生. 串口调试助手是嵌入式开发里非常常用的小工具,市面上有非常多流行的串口调试工具,比如TeraTe ...

  3. chain33 区块链开发框架诞生记

    chain33 诞生记 很多年没有写博客了,应该说,自从2013年开始玩比特币,就没有写过了.这5年来,做了很多事情,也见了很多以前做梦都没有想到过都事情.我做的最开心的事情,也是觉得最有意义的事情, ...

  4. 谷歌Gmail诞生记:十年回首

    美国<时代>周刊网络版今天刊登题为<Gmail诞生记:10年前鲜为人知的故事>(How Gmail Happened: The Inside Story of Its Laun ...

  5. Linux LiveCD 诞生记

    Linux LiveCD 诞生记 650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic ...

  6. (转载)JavaScript世界万物诞生记

    一. 无中生有 起初,什么都没有.造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办?有一个声音说:不是有null嘛?另一个声音说:可是null代 ...

  7. 痞子衡嵌入式:语音处理工具pzh-speech诞生记(2)- 界面构建(wxFormBuilder3.8.0)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具pzh-py-speech诞生之界面构建. 之前痞子衡设计过一个串口调试助手pzh-py-com,也专门写过一篇关于其界面构 ...

  8. [转载]jQuery诞生记-原理与机制

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3520 一.看似偶然的 ...

  9. 【Android测试】【随笔】性能采集工具——小松鼠诞生记

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4945066.html 起因 去年刚加入TX的时候,我便接手 ...

随机推荐

  1. 构建SSH服务

    什么是SSH?简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露.最 ...

  2. [POI2012]STU-Well(二分答案+神仙操作)

    给定一个非负整数序列A,每次操作可以选择一个数然后减掉1,要求进行不超过m次操作使得存在一个Ak=0且max{|Ai−Ai+1|}最小,输出这个最小lk以及最小值. Solution 最大值最小,显然 ...

  3. POJ--3259 Wormholes (SPFA判负环)

    题目电波   3259 Wormholes #include<iostream> #include<cstring> #include<algorithm> #in ...

  4. NoSQL还是SQL?这一篇讲清楚

    https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653550127&idx=1&sn=93f79e007d757a ...

  5. 如何设计出优秀的Restful API?

    https://mp.weixin.qq.com/s?__biz=MzU0OTE4MzYzMw==&mid=2247485240&idx=1&sn=b5b9c8c41659d2 ...

  6. 区块链使用Java,以太坊 Ethereum, web3j, Spring Boot

    Blockchain is one of the buzzwords in IT world during some last months. This term is related to cryp ...

  7. P3378 堆の模板

    如果不是可并堆/带修堆/卡常题,一般都用优先队列实现. 很多O(nlogn)过不了的题都可以用蚯蚓的套路来实现!!! 优先队列带修用延迟删除法. 堆,可以简单的用优先队列来实现,也可以自己手打. #i ...

  8. IT项目管理分享7个开源项目管理工具

    在一项调查中,有 71% 的组织表示他们在开发过程中会用到敏捷方法. 此外,用敏捷方法管理项目比传统方法管理项目成功率高 28%.在这次工具推荐中,我们从一些比较受欢迎的开源项目管理工具中摘取了支持敏 ...

  9. assert的使用

    1.eclipse.myeclipse开启assert(断言),默认是关闭,如下: 说白了就是设置一下jvm的参数,参数是-ea或者-enableassertions 2.assert格式 (1)as ...

  10. mybatis下载地址(所有版本)

    https://github.com/mybatis/mybatis-3/releases,这个github里面几乎包含了所有的没有batis