写在前面
在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR),Fetch ,jQuery实现> 的AJAX。 其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API,jquery的ajax其实是封装了XHR。
fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。
fetch基本用法
fetch()
的功能与 XMLHttpRequest 基本相同,但有三个主要的差异。
-
fetch()
使用 Promise,不使用回调函数,因此大大简化了写法,写起来更简洁。 -
fetch()
采用模块化设计,API 分散在多个对象上(Response 对象、Request 对象、Headers 对象),更合理一些;相比之下,XMLHttpRequest 的 API 设计并不是很好,输入、输出、状态都在同一个接口管理,容易写出非常混乱的代码。 -
fetch()
通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流,所有的数据必须放在缓存里,不支持分块读取,必须等待全部拿到后,再一次性吐出来。
一个基本的 fetch 请求设置起来很简单:
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch()
到的资源路径,然后返回一个包含响应结果的promise(一个 Response
对象)。
总结为:
-
fetch api返回的是一个promise对象
-
Options:
- method(String): HTTP请求方法,默认为
GET
- body(String): HTTP的请求参数
- headers(Object): HTTP的请求头,默认为{}
- credentials(String): 默认为
omit
,忽略的意思,也就是不带cookie;还有两个参数,same-origin
,意思就是同源请求带cookie;include
,表示无论跨域还是同源请求都会带cookie
- method(String): HTTP请求方法,默认为
-
第一个then函数里面处理的是response的格式
兼容性
由于Fetch API是基于Promise设计,旧浏览器不支持Promise,需要使用pollyfill
fetch和ajax 的主要区别
1、fetch()返回的promise将不会拒绝http的错误状态,即使响应是一个HTTP 404或者500 2、在默认情况下 fetch不会接受或者发送cookies