首页 > 设计 > WEB开发 > 正文

高效网络请求之Fetch

2019-11-02 18:28:06
字体:
来源:转载
供稿:网友

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表