资讯专栏INFORMATION COLUMN

Fetch API

AJie / 399人阅读

摘要:遍历所有的字段,接受一个回调函数,和可选的第二个参数。构造函数接受的参数和函数的参数形式一样,实际上方法会使用传入的参数构造出一个对象来。

Fetch API

Fetch API 旨在用来简化 HTTP 请求,它包含以下类和方法:

fetch 方法:用于发起 HTTP 请求

Request 类:用来描述请求

Response 类:用来表示响应

Headers 类:用来表示 HTTP 头部信息

基本用法

fetch 方法接受一个表示 url 的字符串或者 一个 Request 对象作为参数,返回 Promise 对象。请求成功后将结果封装为 Response 对象。Response 对象上具有 jsontext 等方法,调用这些方法后可以获得不同类型的结果。Response 对象上的这些方法同样返回 Promise 对象。

因此基本的使用方法如下:

// 发起请求
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)
});

更多高级用法和配置,详见下面介绍。

fetch 方法

fetch 方法的第一个参数可以是 Request 对象,也可以是一个 url,第二个参数可选,包含一些配置信息。fetch 方法返回 Promise。

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:表示处理缓存的策略,可选值为 defaultno-storereloadno-cacheforce-cacheonly-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 类

Headers 类用来表示 HTTP 的头部信息,其构造函数可以接受一个表示 HTTP 头信息的对象,也可以接受一个 Headers 类的实例作为对象:

var header = new Headers({
  "Content-Type": "image/jpeg",
  "Accept-Charset": "utf-8"
});

var anotherHeader = new Headers(header);
Headers 实例的方法 append

对一个字段追加信息,如果该字段不存在,就创建一个。

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");
// Accept-Encoding: ["deflate", "gzip"]
delete

删除某个字段

get

获得某个字段的第一个值

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");

header.get("Accept-Encoding"); //=> "deflate"
getAll

获得某个字段所有的值

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");

header.getAll("Accept-Encoding"); //=> ["deflate", "gzip"]
has

判断是否存在某个字段

set

设置一个字段,如果该字段已经存在,那么会覆盖之前的。

forEach

遍历所有的字段,接受一个回调函数,和可选的第二个参数。可选的第二个参数地值作为回调函数的 this 值。

var header = new Headers();
header.append("Accept-Encoding", "deflate");

header.forEach(function(value, name, header){
  //...
},this);
Request 类

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)
});
Request 实例的属性

以下属性均为只读属性。这些属性的意义均在上面介绍 fetch 的参数的时候有过说明。

method

url

headers

referrer

referrerPolicy:处理来源信息的策略,关于此可以参见Referrer Policy

mode

credentials

redirect

integrity

cache

Response 类

Response 用来表示 HTTP 请求的响应。其构造函数形式如下:

var res = new Response(body, init);

其中 body 可以是:

Blob

BufferSource

FormData

URLSearchParams

USVString

init 是一个对象,其中包括以下字段:

status:响应的状态码,比如 200,404

statusText:状态信息,比如 OK

headers: 头部信息,可以是一个对象,也可以是一个 Headers 实例

Response 实例的属性

以下属性均为只读属性

bodyUsed:用于表示响应内容是否有被使用过

headers:头部信息

ok:表明请求是否成功,当响应的状态码是 200~299 时,该值为 true

status:状态码

statusText:状态信息

type:表明了响应的类型,可能是下面几种值:

basic: 同源

cors:跨域

error:出错

opaque:Request 的 mode 设置为 no-cors 的时候响应式不透明了,这个时候 type 为 opaque

url:响应的地址

Response 实例的方法

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。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86406.html

相关文章

  • $.ajax vs axios vs fetch

    摘要:使用它可以让页面请求少量的数据,而不用刷新整个页面。这是一个比较粗糙的,不符合关注分离的设计原则,配置和使用都不是那么友好。它的一个优势异步操作,但的异步操作是基于事件的异步模型,没有那么友好。 Ajax 是什么? 答:Ajax是一种可以在浏览器和服务器之间使用异步数据传输(HTTP请求)的技术。使用它可以让页面请求少量的数据,而不用刷新整个页面。而传统的页面(不使用Ajax)要刷新...

    bitkylin 评论0 收藏0
  • js基础进阶--从ajax到fetch的理解

    摘要:使用它可以让页面请求少量的数据,而不用刷新整个页面。基于什么答它基于的是。的库答基于上面的原因,各种库引用而生,然而最有名的就是的中的。它的一个优势异步操作,但的异步操作是基于事件的异步模型,没有那么友好。 欢迎访问我的个人博客:http://www.xiaolongwu.cn 基本知识 1. Ajax是什么? 答:Ajax是一种可以在浏览器和服务器之间使用异步数据传输(HTTP请求)...

    SoapEye 评论0 收藏0
  • ES6 Fetch API HTTP请求实用指南

    摘要:例子张三删除用户为了删除用户,我们首先需要定位用户,然后我们定义方法类型。例子张三结论现在,你已基本了解如何使用的从服务器检索或操作资源,以及如何处理。您可以使用本文作为如何构建操作的请求的指南。 showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562); 本次将介绍如何使用Fetch API(ES6 +)对REST API的...

    Sunxb 评论0 收藏0
  • Fetch API

    摘要:现在有很多优雅的包装,但是这远远不够。一个实例代表了一个的请求部分。一旦创建,它所有的属性都是只读的。处理基本的返回不是所有的接口都返回格式的数据,所以还要处理一些类型的返回结果。最后很好用,但是现在还不允许取消一个请求。 Fetch API 一个隐藏最深的秘密就是AJAX的实现底层的XMLHttpRequest,这个方法本来并不是造出来干这事的。现在有很多优雅的API包装XHR,但是...

    princekin 评论0 收藏0
  • fetch 如何请求数据

    摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

    MarvinZhang 评论0 收藏0
  • fetch 如何请求数据

    摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

    Betta 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<