Request

Fetch API的Request接口代表一个资源请求。

您可以使用Request.Request()构造函数创建一个新的Request对象，但是您更可能遇到由于另一个API操作（如service worker，FetchEvent.request）而返回的Request对象。

Request构造函数

Request.Request()

创建一个新的Request对象。

Request属性

Request.method 只读

包含请求的方法（GET，POST等）

Request.url 只读

包含请求的URL。

Request.headers 只读

包含请求的 Headers 关联对象。

Request.context 只读 

包含请求的上下文（例如，audio，image，iframe，等等）

Request.referrer 只读

包含请求的引用者（例如，client）。

Request.referrerPolicy 只读

包含请求的引用者策略（例如，no-referrer）。

Request.mode 只读

包含请求的模式（例如，cors，no-cors，same-origin，navigate。）

Request.credentials 只读

包含请求的凭证（例如omit，same-origin）。

Request.redirect 只读

包含如何处理重定向的模式。这可能是一个follow，error或manual。

Request.integrity 只读

包含请求的子资源完整性值（例如，sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

Request.cache 只读

包含请求的高速缓存模式（例如，default，reload，no-cache）。

Request实现Body，所以它也有以下属性可用：

Body.body 只读

一个简单的getter用来暴露ReadableStream正文内容。

Body.bodyUsed 只读

存储一个Boolean声明是否已经在响应中使用了该机构。

Request 方法

Request.clone()

创建当前Request对象的副本。

Request实现Body，所以它也有以下方法可用：

Body.arrayBuffer()

返回一个promise，使用请求主体的ArrayBuffer表现解决。

Body.blob()

返回一个promise，使用请求主体的Blob表现解决。

Body.formData()

返回一个promise，使用请求主体的FormData表现解决。

Body.json()

返回一个promise，使用请求主体的JSON表现解决。

Body.text()

返回一个promise，使用请求主体的USVString（文本）表现解决。

注意：这些Body功能只能运行一次；随后的调用将用空字符串/ ArrayBuffers解决。

Request使用例子

在下面的代码片段中，我们使用Request()构造函数创建一个新的请求（对于与脚本相同的目录中的图像文件），然后返回请求的一些属性值：

const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

然后，您可以通过将Request对象作为参数传递给GlobalFetch.fetch()调用来获取此请求，例如：

fetch(myRequest)
  .then(response => response.blob())
  .then(blob => {
    myImage.src = URL.createObjectURL(blob);
  });

在下面的代码片段中，我们使用Request()带有一些初始数据和正文内容的构造函数创建了一个新请求，用于需要主体负载的api请求：

const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
 
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true

注意：body类型只能是一个Blob，BufferSource，FormData，URLSearchParams，USVString或 ReadableStream类型，因此增加一个JSON对象的有效载荷则需要字符串化该对象。

然后，您可以通过将Request对象作为参数传递给GlobalFetch.fetch()调用来获取此api请求，例如获取响应：

fetch(myRequest)
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response => {
    console.debug(response);
    // ...
  }).catch(error => {
    console.error(error);
  });

规范

浏览器兼容性

• 电脑端

• 移动端

注解：

[1]可读流目前在Firefox中启用，但隐藏在dom.streams.enabled和javascript.options.streamsprefs 后面。