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 API 的 Request
接口用来表示资源请求。
你可以使用 Request()
构造函数创建一个新的 Request
对象,但是你更可能会遇到作为其他 API 操作结果返回的 Request 对象,比如 service worker 的 FetchEvent.request
。
构造函数
Request()
-
创建一个新的
Request
对象。
实例属性
Request.body
只读-
主体内容的
ReadableStream
。 Request.bodyUsed
只读-
存储
true
或false
,以指示请求是否仍然未被使用。 Request.cache
只读-
包含请求的缓存模式(例如,
default
、reload
、no-cache
)。 Request.credentials
只读-
包含请求的凭据(例如,
omit
、same-origin
、include
)。默认是same-origin
。 Request.destination
只读-
返回一个描述请求的目的字符串。这是一个字符串,指示所请求的内容类型。
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
只读-
包含请求的 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()
构造函数创建了一个新的请求(用来请求与脚本处于同一目录下的图片),然后返回请求的一些属性:
const request = new Request("https://www.mozilla.org/favicon.ico");
const url = request.url;
const method = request.method;
const credentials = request.credentials;
然后,通过将 Request
对象作为参数传递给 fetch()
调用来获取此请求,例如:
fetch(request)
.then((response) => response.blob())
.then((blob) => {
image.src = URL.createObjectURL(blob);
});
在下面的代码片段中,我们使用 Request()
构造函数创建了一个新的请求,其中包含一些初始数据和主体内容,用于需要主体有效载荷的 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;
备注:
body 只能是一个 Blob
、ArrayBuffer
、TypedArray
、DataView
、FormData
、URLSearchParams
、ReadableStream
或 String
对象,也可以是一个字符串字面量,因此增加一个 JSON 对象的有效载荷则需要字符串化该对象。
然后,通过将 Request
对象作为参数传递给 fetch()
调用来获取此请求,并取得响应,例如:
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 GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | ||||||||||||||
init.browsingTopics parameter | ||||||||||||||
init.duplex parameter | ||||||||||||||
init.keepalive parameter | ||||||||||||||
init.priority parameter | ||||||||||||||
init.referrer parameter | ||||||||||||||
Send ReadableStream in request body | ||||||||||||||
Consume ReadableStream as a response body | ||||||||||||||
arrayBuffer | ||||||||||||||
blob | ||||||||||||||
body | ||||||||||||||
bodyUsed | ||||||||||||||
bytes | ||||||||||||||
cache | ||||||||||||||
cache.only-if-cached | ||||||||||||||
clone | ||||||||||||||
credentials | ||||||||||||||
Default value same-origin | ||||||||||||||
destination | ||||||||||||||
duplex | ||||||||||||||
formData | ||||||||||||||
headers | ||||||||||||||
integrity | ||||||||||||||
isHistoryNavigation | ||||||||||||||
json | ||||||||||||||
keepalive | ||||||||||||||
method | ||||||||||||||
mode | ||||||||||||||
navigate mode | ||||||||||||||
redirect | ||||||||||||||
referrer | ||||||||||||||
referrerPolicy | ||||||||||||||
signal | ||||||||||||||
targetAddressSpace | ||||||||||||||
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.