XHR 和 Fetch 的使用详解和区别总结

在Fetch出现之前我们发送异步请求默认都是通过ajax，底层使用了宿主环境的（XHR）XMLHTTPRequest 对象来实现异步请求。实现代码如下：

var xhr = new XMLHttpRequest();
xhr.open("get","example.php", true);
xhr.send(null);
xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status == 200){alert(xhr.responseText);}}
}

当然我们一般会用一些封装过的ajax实现解决传统方式的繁琐写法以及xhr低版本浏览器可能出现的兼容问题，比如jquery的ajax：

$.ajax({url: 'example.asp',type: 'get',success: function(){}
})

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
fetch的基本用法

fetch('http://example.com/movies.json').then(function(response) {return response}).then(function(response) {console.log(response);});

是不是看上去和jquery以及一些流行的框架的http库很相似。但是你不要忘了，fetch是浏览器原生支持的，使用fetch可以不用引用http的类库即可实现。fetch默认返回一个promise对象。非支持async 和await，使用它可以更加简洁的编写我们的http请求逻辑。

注意点：
1.fetch是有兼容问题的
IE系列是完全不支持的，主流浏览器的早起版本也不支持，所以如果在项目中使用需要做兼容方案处理。
2.fetch 不管请求处理成功还是失败，都会触发promise的resolve状态回掉。这个和传统的ajax 框架是有点区别的。fetch只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。我们可以通过response 对象的ok是否是true来判断是否是真正的成功。

fetch('flowers.jpg').then(function(response) {if(response.ok) {return response.blob();}throw new Error('Network response was not ok.');
}).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL;
}).catch(function(error) {console.log('There has been a problem with your fetch operation: ', error.message);
});

3.fetch配置请求是否携带cookie和接受服务端写入cookie是通过设置credentials

// 所有情况都携带cookie
fetch('https://example.com', {credentials: 'include'
})
// 目前改为默认是same-origin
// 同源的情况下带cookie
fetch('https://example.com', {credentials: 'same-origin'
})
// 忽略cookie
fetch('https://example.com', {credentials: 'omit'
})

4.fetch不想xhr可以原生支持异步请求，fetch因为默认是一个promise的对象。所以如果想用同步的写法，可以借助async await 来实现。

async function getInfo(){const res = await fetch('http://www.test.asp');const result = await res;return result;
}

Fetch更多参数

fetch(url, {body: JSON.stringify(data), // must match 'Content-Type' headercache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cachedcredentials: 'same-origin', // include, same-origin, *omitheaders: {'user-agent': 'Mozilla/4.0 MDN Example','content-type': 'application/json'},method: 'POST', // *GET, POST, PUT, DELETE, etc.mode: 'cors', // no-cors, cors, *same-originredirect: 'follow', // manual, *follow, errorreferrer: 'no-referrer', // *client, no-referrer})

需要注意的是，该语法是比较新的用法，浏览器的支持可能会随着升级产生一些变化。所以切记做好兼容探测处理。避免意外出现。

XHR 和 Fetch 的使用详解和区别总结相关推荐

Node.js中package.json中库的版本号详解(^和~区别)
Node.js中package.json中库的版本号详解(^和~区别) 当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号 ...
ViewPager 的适配器 PagerAdapter 、FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
1.FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
【Java-Java集合】Java集合详解与区别
[Java-Java集合]Java集合详解与区别 1)概述 2)集合框架图 2.1.总框架图 2.2.Iterable 框架图 2.3.Map 框架图 3)List 3.1.ArrayList 类继承 ...
Sql Server 中 GAM、SGAM、PAM、IAM、DCM 和 BCM 的详解与区别
Sql Server 中 GAM.SGAM.PAM.IAM.DCM 和 BCM 的详解与区别 GAM.SGAM.PAM.IAM.DCM 和 BCM 都是 SQL Server 中用来管理空间分配的一些 ...
c语言运算符 amp 的意思,C++中运算符 amp;和amp;amp;、|和|| 的详解及区别
C++中运算符 &和&&.|和|| 的详解及区别简介: &&是逻辑与运算符,||是逻辑或运算符,都是逻辑运算符,两边只能是bool类型 &与| 既可以 ...
cpu二级缓存和一级缓存详解及区别(图解)
cpu二级缓存和一级缓存详解及区别(图解) 2012-09-02 12:27:55| 分类: 硬件技术 |字号订阅处理器缓存的传输速率确实很高,然而还不足以取代内存的地位,这主要是由于缓存只是内 ...
Java创建comparator对象,Java Comparable 和 Comparator 的详解及区别
Java Comparable 和 Comparator 的详解及区别 Java 中为我们提供了两种比较机制:Comparable 和 Comparator,他们之间有什么区别呢?今天来了解一下. C ...
MySQL存储引擎InnoDB、MyISAM和MEMORY介绍详解和区别
文章目录 MySQL存储引擎InnoDB.MyISAM和MEMORY介绍详解和区别 InnoDB存储引擎特点操作示例创建InnoDB表修改表引擎为InnoDB MyISAM存储引擎特点操作 ...
mysql左连接和内连接区别_MYSQL 左连接右连接和内连接的详解及区别
MYSQL 左连接右连接和内连接的区别,这里就对这些概念经过一个实例,讲解清楚. 代码如下: drop table table1; CREATE TABLE `andrew`.`table1` ( ` ...
进程和线程的详解和区别
1 进程和线程概述我们都知道计算机的核心是CPU,它承担了所有的计算任务,而操作系统是计算机的管理者,它负责任务的调度,资源的分配和管理,统领整个计算机硬件:应用程序是具有某种功能的程序,程序是运行 ...

XHR 和 Fetch 的使用详解和区别总结

XHR 和 Fetch 的使用详解和区别总结相关推荐

最新文章

热门文章