对于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版本控制管理>这本书(偏理论,内容完善,很不错),针对所学 ...
随机推荐
- CSS实现鼠标移入时图片的放大效果以及缓慢过渡
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...
- Java基础周测题,获取用户从控制台输入的年份,判断是否是闰年
需求说明: 获取用户从控制台输入的年份,判断是否是闰年: 是闰年: 是平年: 实现代码: import java.util.Scanner; public class test { public st ...
- 射频FEM介绍
FEM介绍 1. 什么是FEM 1.1 FEM简介 FEM,Front-end Modules,即就是前端模块.硬件电路中的前端模块完成射频信号的发送放大以及接收放大(with bypass).滤波, ...
- Linux安装Collabora Online让NextCloud支持Office在线编辑
https://www.xiaoz.me/archives/10865 NextCloud可通过插件实现在线编辑Office文档,不过前提是需要依赖于Collabora Online服务,记录一下操作 ...
- 华为云 Kubernetes 管理员实训 五 课后作业
练习1 部署一个Deployment应用,使用secret普通卷,该应用启动依赖此secret. Deployment的名称为<hwcka-005-1-你的华为云id> 将所用命令.创建的 ...
- 实验 2 :Mininet 实验 —— 拓扑的命令脚本
实验2: Mininet 实验--拓扑的命令脚本 一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二 .实验任务 通过使用命令行创建.Python 脚本编 ...
- Word2010制作倒福字
原文: https://www.toutiao.com/i6489772955797553677/ 选择"插入"选项卡,"插图"功能组,"形状&quo ...
- LINUX学习-Nginx实现https
一.环境准备 1.安装nginx时,需要将--with-http_ssl_module 模块开启. 2.关闭selinux和防火墙 3.在 /usr/local/nginx/html/ 目录下添加bb ...
- js复制文本到剪贴板
execCommand是document的一个方法,返回值是布尔值(true,false) true表示操作被支持,false表示操作不被支持 此方法只针对于input和textarea,对里面的内容 ...
- 离线环境安装使用 Ansible
之前写了一篇介绍 Ansible 的文章 ,今天回顾看来写的有些匆忙,一些具体的操作步骤都没有讲明白,不利于读者复现学习.最近又申请了一个几百台机器的环境,正好借此机会把如何在离线环境中使用 Ansi ...