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. Balanced Sequence HDU - 6299(杭电多校1 B)

    题目说要n个字符串串内随意组合以后将这些串放在一起,然后求最长的括号匹配的长度,并不要求是连续的 因为不需要是连续的,所以可以先把已经匹配好的括号加入到答案里面去,先把这些删掉,以为并不影响结果,然后 ...

  2. NOI2009管道取珠(dp)

    题意:给定两列球,可以从任意一列球的末尾弹出一个球,最后会得到一个序列,设第i种序列可以被a[i]种操作产生,那么会产生a[i]^2的贡献,求贡献和. Solution: 首先我们观察a[i]^2的含 ...

  3. 2019 校内赛 RPG的天赋分支(贪心)

    Problem Description 很多游戏都有天赋树的概念,天赋树的不同分支具有不同的属性加成,那么合理选择分支就非常重要了.Luke最近沉迷一款RPG游戏,它的天赋树机制如下:角色具有n个可选 ...

  4. poj3190 Stall Reservations

    我一开始想用线段树,但是发现还要记录每头cow所在的棚...... 无奈之下选择正解:贪心. 用priority_queue来维护所有牛棚中结束时间最早的那个牛棚,即可得出答案. 注意代码实现的细节. ...

  5. JS(基础)_总结获取页面中元素和节点的方式

    一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式 二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签 结点:页面 ...

  6. opencv源码学习: getGaussianKernel( 高斯核);

    参考: https://blog.csdn.net/u012633319/article/details/80921023 二维高斯核, 可以根据下面的公式推到为两个一维高斯核的乘积: 原型: /** ...

  7. mysql常用快速查询修改操作

    mysql常用快速查询修改操作 一.查找并修改非innodb引擎为innodb引擎 # 通用操作 mysql> select concat('alter table ',table_schema ...

  8. 2017-12-15python全栈9期第二天第五节之while else的用法二当不被break打断时else内容的结果会被打印

    #!/user/bin/python# -*- coding:utf-8 -*-count = 0while count <=5 : count += 1 if count == 3 : pas ...

  9. SQL优化笔记一:索引和explain

    目录 为什么需要优化SQL SQL优化的重点 索引 索引的结构 索引的优缺点总结: 索引的分类 索引操作 B树 实战 问题 数据库方面,我会使用MySQL来讲解 为什么需要优化SQL 性能低,执行时间 ...

  10. parseFloat()为什么没有效果

    parseFloat() 函数可解析一个字符串,并返回一个浮点数.看清楚说明是操作字符串,如果是数值类型parseFloat([],x)会失去效果. 正确的用法:parseFloat().toFixe ...