Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

Fetch APIRequest 接口用来表示资源请求。

你可以使用 Request() 构造函数创建一个新的 Request 对象,但是你更可能会遇到作为其他 API 操作结果返回的 Request 对象,比如 service worker 的 FetchEvent.request

构造函数

Request()

创建一个新的 Request 对象。

实例属性

Request.body 只读

主体内容的 ReadableStream

Request.bodyUsed 只读

存储 truefalse,以指示请求是否仍然未被使用。

Request.cache 只读

包含请求的缓存模式(例如,defaultreloadno-cache)。

Request.credentials 只读

包含请求的凭据(例如,omitsame-origininclude)。默认是 same-origin

Request.destination 只读

返回一个描述请求的目的字符串。这是一个字符串,指示所请求的内容类型。

Request.headers 只读

包含请求相关联的 Headers 对象。

Request.integrity 只读

包含请求的子资源完整性值(例如 sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

Request.method 只读

包含请求的方法(GETPOST 等)。

Request.mode 只读

包含请求的模式(例如,corsno-corssame-originnavigate)。

Request.redirect 只读

包含如何处理重定向的模式。它可能是 followerrormanual 之一。

Request.referrer 只读

包含请求的 referrer(例如,client)。

Request.referrerPolicy 只读

包含请求的 referrer 策略(例如,no-referrer)。

Request.signal 只读

返回与请求相关联的 AbortSignal

Request.url 只读

包含请求的 URL。

实例方法

Request.arrayBuffer()

返回 promise,其兑现值为请求主体的 ArrayBuffer 表示形式。

Request.blob()

返回 promise,其兑现值为请求主体的 Blob 表示形式。

Request.clone()

创建一个当前 Request 对象的副本。

Request.formData()

返回 promise,其兑现值为请求主体的 FormData 表示形式。

Request.json()

返回 promise,其兑现值为请求主体经过 JSON 解析的结果。

Request.text()

返回 promise,其兑现值为请求主体的文本表示形式。

备注: 这些请求主体上的函数只能运行一次,随后的调用将出现 TypeError 错误,表明请求主体流已被使用。

示例

在下面的代码中,我们使用 Request() 构造函数创建了一个新的请求(用来请求与脚本处于同一目录下的图片),然后返回请求的一些属性:

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

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

然后,通过将 Request 对象作为参数传递给 fetch() 调用来获取此请求,例如:

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

在下面的代码片段中,我们使用 Request() 构造函数创建了一个新的请求,其中包含一些初始数据和主体内容,用于需要主体有效载荷的 API 请求:

js
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;

备注: body 只能是一个 BlobArrayBufferTypedArrayDataViewFormDataURLSearchParamsReadableStreamString 对象,也可以是一个字符串字面量,因此增加一个 JSON 对象的有效载荷则需要字符串化该对象。

然后,通过将 Request 对象作为参数传递给 fetch() 调用来获取此请求,并取得响应,例如:

js
fetch(request)
  .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);
  });

规范

Specification
Fetch
# request-class

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Request
Request() constructor
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrer parameter
Send ReadableStream in request body
Experimental
Consume ReadableStream as a response body
arrayBuffer
blob
body
bodyUsed
bytes
cache
cache.only-if-cached
clone
credentials
Default value same-origin
destination
duplex
Experimental
formData
headers
integrity
isHistoryNavigation
json
keepalive
method
mode
navigate mode
redirect
referrer
referrerPolicy
signal
targetAddressSpace
Experimental
text
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

参见