Fetch是一个处理网络请求的框架, 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容,如 HTTP Method,HTTP Headers,Request,Response。代替ajax可以更加方便的处理异步请求。
兼容性
注:在 Chrome 浏览器中已经全局支持了 fetch 函数,window.fetch就可以访问到该方法。打开调试工具,在 Console 中可以进行调试和使用。
使用
fetch('www.baidu.com/api',{
headers: {
'Cache-Control': 'no-cache'
}
})
.then(response => {
//do something here...
})
第一个参数是请求的URL,第二个参数是一个参数对象用于配置请求。请求对象一旦创建了, 你便可以将所创建的对象传递给fetch()方法。
另外,可以给fetch统一传递一个request 对象,所以也可以通过如下代码配置和发送请求:
var req = new Request(URL, {method: 'GET', cache: 'reload'});
fetch(req)
.then(function(response) {
return response.json();
}).then(function(json) {
//do something here
});
注:使用fetch请求之后,返回一个Promise,所以可以使用fetch().then()
处理
Request
Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法。
常用的参数配置有:
1. method - 支持 GET, POST, PUT, DELETE, HEAD
2. url - 请求的 URL
3. headers - 对应的 Headers 对象
4. referrer - 请求的 referrer 信息
5. mode - 可以设置 cors, no-cors, same-origin
6. credentials - 设置 cookies 是否随请求一起发送。可以设置: omit, same-origin
7. redirect - follow, error, manual
8. integrity - subresource 完整性值(integrity value)
9. cache - 设置 cache 模式 (default, reload, no-cache)
注意:只有第一个参数 URL 是必需的。在 Request 对象创建完成之后, 所有的属性都变为只读属性.
Response
使用fetch网路请求之后,在then
的回调函数内接收到response
参数,代码如上,关于该参数的详细解释
常用的几个有:(可以查看上文的截图)
1. Response.status 也就是 StatusCode,如成功就是 200 ;
2. Response.statusText 是 StatusCode 的描述文本,如成功就是 OK ;
3. Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是StatusCode 为 200-299
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
http://web.jobbole.com/84924/
http://blog.csdn.net/renfufei/article/details/51494396
http://stackoverflow.com/questions/29775797/fetch-post-json-data