meface/fetch.md at 69b97ea4da2f31a8bb348c9062940564877a5fed

7.5 KiB

Raw Blame History

title

date

author

fetch API接口

基本概念

Fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案，是原生的js。可以在请求中的type查看到fetch请求的类型是fetch，普通的ajax请求的类型是xhr。

Fetch API 是基于Promise的。核心在于对HTTP接口的抽象，包含 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。

global fetch是位于 WorkerOrGlobalScope 中的一个 mixin 的 fetch() 方法，返回一个promise实例，该promise会在请求响应后被resolve，并传回Response对象。

window和WorkerGlobalScope都实现了WorkerOrGlobalScope，即window中存在fetch()方法，可以在任何地方调用fetch()方法。

从fetch()返回的Promise 不会被标记为reject（即使响应的HTTP状态码是404或500），而是将Promise的状态变为resolve，但返回的response中的ok属性为false。仅当网络故障时或请求被阻止时，才会标记为reject。

基本语法

语法：fetch(input[,init])

参数：

input：获取资源的URL，或是一个Request对象
init：初始化参数（一个配置对象），可选参数有：
- method：请求方式，GET, POST, PUT, DELETE, etc.
- headers：请求的头信息。可以指定参数类型Content-Type。
- body：请求参数。需要与header中的 'Content-Type' 匹配。
- mode：请求的模式，如 cors、 no-cors 或者 same-origin。
- credentials：请求的 credentials，如 omit、``same-origin 或者 include。若需要当前域名内自动发送cookie，则必须提供该参数。
- cache：请求的cache模式，default、 no-store、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
- redirect：可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误）, 或者 manual (手动处理重定向). 在Chrome中默认使用follow（Chrome 47之前的默认值是manual）
- referrer： no-referrer、``client或一个 URL。默认是 client。
- referrerPolicy：指定了HTTP头部referer字段的值。可能为以下值之一： no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
- integrity：包括请求的 subresource integrity 值。

如果请求头Headers中没有设置 Content-Type 值，发送的请求也会自动设值。因为request和response（包括 fetch() 方法）都会试着自动设置 Content-Type。

Content-Type的可选值：

text/html：HTML文档标记
image/jpeg：JPEG图片标记
image/gif：GIF图片标记
application/javascript：js文档标记
application/xml：xml文件标记，如果是text/xml的话，将忽略xml数据里的编码格式
multipart/form-data：文件上传
application/x-www-form-urlencoded：普通表单

基本使用

一个基本的fetch请求设置起来很简单，最简单的用法是只提供一个资源路径的URL，然后返回一个包含响应结果的promise（一个Response对象）。

fetch('http://localhost:8080/geoserver/wfs')
 .then(function(response){
    //handle HTTP response
    return response.json();
  })
  .then(function(value){
    //do something
  });

Response 实例是在 fetch() 处理完 promise 之后返回的。其包含以下属性（只读）：

Response.headers：包含此 Response 所关联的 Headers 对象。
Response.ok：包含了一个布尔值，标示该 Response 成功
Response.redirected：表示该Response是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。
Response.status：包含 Response 的状态码（HTTP 状态码的范围在 200-299）
Response.statusText：包含了与该 Response 状态码一致的状态信息（例如，OK对应 200）。
Response.type：包含Resposne的类型（例如：basic、cors）
Repsonse.url：包含 Response 的URL。
Response.body：一个简单的 getter，用于暴露一个 ReadableStream 类型的 body 内容。
Response.bodyUsed：包含了一个布尔值来标示该 Response 是否读取过 Body。

不管是请求还是响应都能够包含 body 对象。而 Request 和Response也都实现了Body 类的一些方法以获取body的内容。例如：

Response.json()：读取 Response 对象并且将它设置为已读，并返回一个被解析为 JSON 格式的 Promise 对象。
Response.text()：读取 Response 对象并且将它设置为已读，并返回一个被解析为 USVString 格式的 Promise 对象。
Response.formData()：读取Response 对象并且将它设置为已读，并返回一个被解析为 FormData 格式的 Promise 对象。
Response.blob()：读取 Response 对象并且将它设置为已读，并返回一个被解析为 Blob 格式的 Promise 对象。
Response.arrayBuffer()：读取 Response 对象并且将它设置为已读，并返回一个被解析为 ArrayBuffer 格式的 Promise 对象。

因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次。

参考文章

[1] Fetch 接口 https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

[2] Response https://developer.mozilla.org/zh-CN/docs/Web/API/Response

7.5 KiB Raw Blame History Unescape Escape