Fetch API 旨在用来简化 HTTP 请求,它包含如下类和方法:javascript
fetch 方法:用于发起 HTTP 请求html
Request 类:用来描述请求java
Response 类:用来表示响应react
Headers 类:用来表示 HTTP 头部信息git
fetch 方法接受一个表示 url 的字符串或者 一个 Request 对象做为参数,返回 Promise 对象。请求成功后将结果封装为 Response 对象。Response 对象上具备 json
、text
等方法,调用这些方法后能够得到不一样类型的结果。Response 对象上的这些方法一样返回 Promise 对象。github
所以基本的使用方法以下:web
// 发起请求 fetch('https://api.github.com/repos/facebook/react').then(function(res){ // 请求成功,获得 response 对象,调用 response 对象的 json 方法并返回 return res.json(); }).then(function(data){ // response 对象的 json 方法执行成功,获得结果 console.log(data) });
更多高级用法和配置,详见下面介绍。json
fetch 方法的第一个参数能够是 Request 对象,也能够是一个 url,第二个参数可选,包含一些配置信息。fetch 方法返回 Promise。api
Promise fetch(String url [, Object options]); Promise fetch(Request req [, Object options]);
配置信息包含下列内容:跨域
method:请求的方法,如: GET、 POST
headers:请求头部信息,能够是一个 Headers 对象的实例,也能够是一个简单对象
body: 须要发送的数据,能够是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。须要注意的是 GET 和 HEAD 方法不能包含 body。
mode:请求的模式,常见取值以下:
same-origin:只容许同源的请求,不然直接报错
cors:容许跨域,但要求响应中包含 Access-Control-Allow-*
这类表示 CORS 的头部信息,且响应中只有部分头部信息( Cache-Control
, Content-Language
, Content-Type
, Expires
, Last-Modified
, Pragma
)能够读取,但响应内容能够不受限地读取。
no-cors:容许跨域请求那些响应中没有包含 CORS 头信息的域,可是响应内容是不可读取的。使用使用这种模式配合 ServiceWorkers 能够实现预加载一些资源。
credentials:表示是否发送 cookie,有三个可选值 omit, same-origin, include
omit:不发生 cookie
same-origin: 仅在同源时发生 cookie
include:发送 cookie
cache:表示处理缓存的策略,可选值为 default
、no-store
、reload
、no-cache
、force-cache
、only-if-cached
,关于此能够参考https://fetch.spec.whatwg.org
redirect:发生重定向时候的策略。有如下可选值:
follow:跟随
error:发生错误
manual:须要用户手动跟随
referrer: 一个字符串,能够是 no-referrer, client, 或者是一个 URL。默认值是 client。
integrity:包含一个用于验证子资源完整性的字符串。关于此,能够参看 Subresource Integrity 介绍
该函数返回一个 Promise 对象,若请求成功会用 Response 的实例做为参数调用 resolve ,若请求失败会用一个错误对象来调用 reject。
Headers 类用来表示 HTTP 的头部信息,其构造函数能够接受一个表示 HTTP 头信息的对象,也能够接受一个 Headers 类的实例做为对象:
var header = new Headers({ 'Content-Type': 'image/jpeg', 'Accept-Charset': 'utf-8' }); var anotherHeader = new Headers(header);
对一个字段追加信息,若是该字段不存在,就建立一个。
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); // Accept-Encoding: ['deflate', 'gzip']
删除某个字段
得到某个字段的第一个值
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); header.get('Accept-Encoding'); //=> 'deflate'
得到某个字段全部的值
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); header.getAll('Accept-Encoding'); //=> ['deflate', 'gzip']
判断是否存在某个字段
设置一个字段,若是该字段已经存在,那么会覆盖以前的。
遍历全部的字段,接受一个回调函数,和可选的第二个参数。可选的第二个参数地值做为回调函数的 this 值。
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.forEach(function(value, name, header){ //... },this);
Request 对象用于描述请求内容。构造函数接受的参数和 fetch 函数的参数形式同样,实际上 fetch 方法会使用传入的参数构造出一个 Request 对象来。
下面例子从 github 抓取到 react 的 star 数并打印出来。
var req = new Request('https://api.github.com/repos/facebook/react',{ method:'GET' }); fetch(req).then(function(res){ return res.json() }).then(function(data){ console.log(data.stargazers_count) });
如下属性均为只读属性。这些属性的意义均在上面介绍 fetch 的参数的时候有过说明。
method
url
headers
referrer
referrerPolicy:处理来源信息的策略,关于此能够参见Referrer Policy
mode
credentials
redirect
integrity
cache
Response 用来表示 HTTP 请求的响应。其构造函数形式以下:
var res = new Response(body, init);
其中 body 能够是:
Blob
BufferSource
FormData
URLSearchParams
USVString
init 是一个对象,其中包括如下字段:
status:响应的状态码,好比 200,404
statusText:状态信息,好比 OK
headers: 头部信息,能够是一个对象,也能够是一个 Headers 实例
如下属性均为只读属性
bodyUsed:用于表示响应内容是否有被使用过
headers:头部信息
ok:代表请求是否成功,当响应的状态码是 200~299 时,该值为 true
status:状态码
statusText:状态信息
type:代表了响应的类型,多是下面几种值:
basic: 同源
cors:跨域
error:出错
opaque:Request 的 mode 设置为 no-cors
的时候响应式不透明了,这个时候 type 为 opaque
url:响应的地址
clone:复制一个响应对象
要想从 Response 的实例中拿到最终的数据须要调用下面这些方法,这些方法都返回一个 Promise 而且使用对应的数据类型来 resolve。
arrayBuffer:把响应数据转化为 arrayBuffer 来 resolve
blob:把响应数据转换为 Blob 来 resolve
formData:把响应数据转化为 formData 来 resolve
json:把响应数据解析为对象后 resolve
text:把响应数据当作字符串来调用 resolve
最后在把上面使用例子进行一个细致的说明:
// 构造出 Request 对象 var req = new Request('https://api.github.com/repos/facebook/react',{ method:'GET' }); // 发起请求,fetch 方法返回一个 Promise 对象 fetch(req).then(function(res){ // 获得了 response,这里调用 response 的 json 方法 // 该方法一样返回一个 Promise return res.json(); }).then(function(data){ // 获得解析后的对象 console.log(data.stargazers_count) });
能够看出 fetch 方法使用起来比 XMLHttpRequest 要方便的多,关于其兼容性,能够参考 这里,对于不兼容的浏览器,你可使用 polyfill。