Request - 表示一个资源请求

Request 是 Fetch API 的接口，表示一个资源请求。

您可以使用 Request() 构造函数创建一个新的 Request 对象。但是更有可能遇到作为另一个 API 操作（例如服务 Worker 的 FetchEvent.request）的结果而返回的请求对象。

构造函数

Request()

创建一个新的 Request 对象。

属性

Request.cache 只读

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

Request.context 只读

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

Request.credentials 只读

包含请求的凭据（例如，omit, same-origin, include）。默认值为 same-origin。

Request.destination 只读

一个字符串，来自 RequestDestination 枚举，描述请求的目的地。这是一个指示所请求内容类型的字符串。

Request.headers 只读

包含请求的关联 Headers 对象。

Request.integrity 只读

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

Request.method 只读

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

Request.mode 只读

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

Request.redirect 只读

包含如何处理重定向的模式。它可以是 follow，error 或 manual 之一。

Request.referrer 只读

包含请求的来源网址（例如，client）。

Request.referrerPolicy 只读

包含请求的引荐网址策略（例如，no-referrer）。

Request.url 只读

包含请求的 URL。

Request 实现了 Body，因此它还继承了以下属性：

body 只读

一个简单的获取方法，用于获取主体内容的 ReadableStream。

bodyUsed 只读

存储一个 Boolean，它声明是否已在响应中使用主体。

方法

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() 构造函数创建一个新请求（访问与脚本位于同一目录中的图像文件），然后返回该请求的一些属性值：

const request = new Request('https://www.mozilla.org/favicon.ico');

const URL = request.url;
const method = request.method;
const credentials = request.credentials;

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

fetch(request)
  .then(response => response.blob())
  .then(blob => {
    image.src = URL.createObjectURL(blob);
  });

在以下代码段中，我们使用 Request() 构造函数创建一个新请求，其中包含一些需要主体 payload 的 api 请求的初始数据和主体内容：

const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});

const URL = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;

注意：主体类型只能是 Blob，BufferSource，FormData，URLSearchParams，USVString 或 ReadableStream 类型，因此要将 JSON 对象添加到有效负载中，您需要对该对象进行字符串化。

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

fetch(request)
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('api 服务器出了点问题！');
    }
  })
  .then(response => {
    console.debug(response);
    // ...
  }).catch(error => {
    console.error(error);
  });

规范

规范	状态	备注
Fetch Request 的定义	现行的标准	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 从 Chrome 47 开始，init 参数的属性的默认值已更改。mode 默认为 same-origin（原来是 no-cors）。credentials 默认为 include（原来是 same-origin）。redirect 默认为 follow（原来是 manual）。

2. init 参数的某些默认值在 Samsung Internet 5.0 中已更改。有关详细信息，请参见 “属性” 部分。

3. 从 WebView 47 开始，init 参数的属性的默认值已更改。mode 默认为 same-origin（原来是 no-cors）。credentials 默认为 include（原来是 same-origin）。redirect 默认为 follow（原来是 manual）。

4. 有关更多信息，请参见 bug 1188062。

5. Chrome 59 中添加了 Fragment 支持。

6. Opera 46 中添加了 Fragment 支持。

相关链接

• ServiceWorker API
• HTTP 访问控制（CORS）
• HTTP