对于fetch的理解
在一篇文章里见到一位作者是这么说的
XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。
Fetch的出现就是为了解决XHR的问题
首先我们分析XHR发送一个请求的方式
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");
});
再将其变成es6的箭头函数
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
这样看起来就少了很多,可看性很好,但是作者不是很满意,说这种promise的写法有callback的影子,并且prominse使用catch来精选错误处理的方式有点奇怪,于是乎他就用上了async/await
这里需要说明一下async/await是ES7的新API,可以用bable编译成ES5代码,使用await外面不包async会报错
let url="xxxxxxx";
async function main(){
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
}
对于fetch跨域需要设置mode
mode有三个取值
- same-origin 不允许跨域
- cors 允许跨域,需服务器配合如 node.js
- no-cors 允许跨域,服务器不需要设置如上代码但不能将服务端数据返回
当然fetch和xhr也是有区别的
fetch是有兼容性问题的,对ie不是很友好
fetch不管请求成功还是失败,都会触发promise的resolve状态回调,fetch只有在网络故障导致的发送请求失败或者跨域才会触发reject的逻辑,我们可以通过response 对象的ok是否是true来判断是否是真正的成功。
fetch配置请求是否携带cookie和接受服务端写入cookie是通过设置credentials // include, same-origin, *omit
fetch不想xhr可以原生支持异步请求,fetch因为默认是一个promise的对象。所以如果想用同步的写法,可以借助async await 来实现。
文章引用:
对于fetch的理解的更多相关文章
- git命令详解( 二 )
这是git详解的第二篇,最近这个加班有点虚,所以文章也写的比较懒了,一到加班不得已,保温杯里泡枸杞啊,不扯了,今天我们来看看git的第二篇 这篇内容主要是git的一些远程命令 远程仓库 git clo ...
- Git 沙盒模拟实战(远程篇)
Git 沙盒模拟实战(远程篇) >---基础篇 远程仓库 远程仓库并不复杂, 在如今的云计算盛行的世界很容易把远程仓库想象成一个富有魔力的东西, 但实际上它们只是你的仓库在另个一台计算机上的拷贝 ...
- 真正理解 git fetch, git pull 以及 FETCH_HEAD【转】
转自:http://www.cnblogs.com/ToDoToTry/p/4095626.html 真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必 ...
- 真正理解 git fetch, git pull 以及 FETCH_HEAD
真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须要附加讲清楚git remote,git merge .远程repo, branch . commi ...
- 结合promise对原生fetch的两个then用法理解
前言:该问题是由于看到fetch的then方法的使用,产生的疑问,在深入了解并记录对promise的个人理解 首先看一下fetch请求使用案例: 案例效果:点击页面按钮,请求当前目录下的arr.txt ...
- 真正理解 git fetch, git pull 以及 FETCH_HEAD(转)
转自http://www.cnblogs.com/ToDoToTry/p/4095626.html 真正理解 git fetch, git pull 要讲清楚git fetch,git pull,必须 ...
- 理解 ajax、fetch和axios
背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...
- Git 少用 Pull 多用 Fetch 和 Merge
本文有点长而且有点乱,但就像Mark Twain Blaise Pascal的笑话里说的那样:我没有时间让它更短些.在Git的邮件列表里有很多关于本文的讨论,我会尽量把其中相关的观点列在下面. 我最常 ...
- git的简单理解及基础操作命令
前端小白一枚,最近开始使用git,于是花了2天看了廖雪峰的git教程(偏实践,对于学习git的基础操作很有帮助哦),也在看<git版本控制管理>这本书(偏理论,内容完善,很不错),针对所学 ...
随机推荐
- SuperPixel
目录 SLIC Superpixel algorithm 距离函数的选择 代码 Gonzalez R. C. and Woods R. E. Digital Image Processing (For ...
- Gradient-based Hyperparameter Optimization through Reversible Learning
目录 概 主要内容 算法 finite precision arithmic 实验 Maclaurin D, Duvenaud D, Adams R P, et al. Gradient-based ...
- [opencv]计算多边形逼近曲线的长度
//利用曲线逼近,计算逼近曲线的长度 //首先创建一个逼近曲线 vector<Point2f> approx; approxPolyDP(contours[i], approx, 2, t ...
- IM2603 Type-C扩展坞电源管理 IC
IM2603 概述 用于带有集成降压转换器的 Type-C 外围应用的电源管理 IC IM2603 是一款主要用于 Type-C 外围应用的电源管理 IC. 它集成了一个带有内置高侧 MOSFET 的 ...
- Java初学者作业——定义一个计算器类, 实现计算器类中加、 减、 乘、 除的运算方法, 每个方法能够接收2个参数。
返回本章节 返回作业目录 需求说明: 定义一个计算器类, 实现计算器类中加. 减. 乘. 除的运算方法, 每个方法能够接收2个参数. 实现思路: 定义计算器类. 定义计算器类中加.减.乘.除的方法. ...
- MySQL数据操作与查询笔记 • 【第4章 SELECT 数据查询】
全部章节 >>>> 本章目录 4.1 select 选择列表 4.1.1 select 基本结构 4.1.2 选择列表 4.2 MySQL 运算符 4.2.1 MySQL ...
- Ranger-AdminServer安装
Ranger-AdminServer安装,对应的Ranger版本1.0.0. RangerAdmin安装依赖如下组件: mysql solr IP/机器名 安装软件 运行进程 zdh-245 Rang ...
- 基于机器学习和TFIDF的情感分类算法,详解自然语言处理
摘要:这篇文章将详细讲解自然语言处理过程,基于机器学习和TFIDF的情感分类算法,并进行了各种分类算法(SVM.RF.LR.Boosting)对比 本文分享自华为云社区<[Python人工智能] ...
- powershell操作excel
https://blog.csdn.net/u010288731/article/details/83120205 如何创建一个Excel 应用程序对象? $xl = new-object -como ...
- 在实验中观察指针——C++ 函数参数的压栈顺序
前言 好久没写东西了,突发奇想,写写函数参数的压栈顺序 先看看这个问题 https://q.cnblogs.com/q/137133/ 然后看我简化的代码,猜输出结果是多少? #include< ...