JS Fetch

2022-11-14 16:56:54

使用Fetch

1、进行 fetch 请求

一个基本的 fetch请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')

  .then(function(response) {

    return response.json();

  })

  .then(function(myJson) {

    console.log(myJson);

  });

这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径，然后返回一个包含响应结果的promise(一个 Response 对象)。

2、Headers

使用 Headers 的接口，你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对：

var content = "Hello World";

var myHeaders = new Headers();

myHeaders.append("Content-Type", "text/plain");

myHeaders.append("Content-Length", content.length.toString());

myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。

可能的值如下：

none：默认的
request：从 request 中获得的 headers（Request.headers）只读
request-no-cors：从不同域（Request.mode no-cors）的 request 中获得的 headers 只读
response：从 response 中获得的 headers（Response.headers）只读
immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读。

3、Response 对象

如上述, Response 实例是在fetch()处理完promises之后返回的.

它的实例也可用通过JavaScript来创建, 但只有在ServiceWorkers中才真正有用,当使用respondWith()方法并提供了一个自定义的response来接受request时:

var myBody = new Blob();

addEventListener('fetch', function(event) {

  event.respondWith(new Response(myBody, {

    headers: { "Content-Type" : "text/plain" }

  });

});

Response() 构造方法接受两个可选参数—response的数据体和一个初始化对象(与Request()所接受的init参数类似.)

你会用到的最常见的response属性有:

Response.status — 整数(默认值为200) 为response的状态码.
Response.statusText — 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
Response.ok — 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.

4、Body

不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.

ArrayBuffer
ArrayBufferView (Uint8Array and friends)
Blob/File
string
URLSearchParams
FormData

Body 类定义了以下方法 (这些方法都被 Request 和Response所实现)以获取body内容. 这些方法都会返回一个被解析后的promise对象和数据.

比起XHR来，这些方法让非文本化的数据使用起来更加简单。

请求体可以由传入body参数来进行设置:

var form = new FormData(document.getElementById('login-form'));

fetch("/login", {

  method: "POST",

  body: form

})

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

5、特性检测

Fetch API 的支持情况，可以通过检测Headers, Request, Response 或 fetch()是否在Window 或 Worker 域中。例如：

if(self.fetch) {

    // run my fetch request here

} else {

    // do something with XMLHttpRequest?

}

码农公寓