Fetch是一个处理网络请求的框架, 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容,如 HTTP Method,HTTP Headers,Request,Response。代替ajax可以更加方便的处理异步请求。

兼容性

点击查看fetch兼容性一览表

:在 Chrome 浏览器中已经全局支持了 fetch 函数,window.fetch就可以访问到该方法。打开调试工具,在 Console 中可以进行调试和使用。

image

使用

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


本文转载:CSDN博客