Response
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.
Fetch API 的 Response
接口呈现了对一次请求的响应数据。
你可以使用 Response.Response()
构造函数来创建一个 Response
对象,但通常更可能遇到的情况是,其他的 API 操作返回了一个 Response 对象。例如一个 service worker 的 Fetchevent.respondWith
,或者一个简单的 GlobalFetch.fetch()
。
构造函数
Response()
-
创建一个新的
Response
对象。
属性
Response.headers
只读-
包含此 Response 所关联的
Headers
对象。 Response.ok
只读-
包含了一个布尔值,标示该 Response 成功(HTTP 状态码的范围在 200-299)。
Response.redirected
只读-
表示该 Response 是否来自一个重定向,如果是的话,它的 URL 列表将会有多个条目。
Response.status
只读-
包含 Response 的状态码(例如
200
表示成功)。 Response.statusText
只读-
包含了与该 Response 状态码一致的状态信息(例如,OK 对应
200
)。 Response.type
只读-
包含 Response 的类型(例如,
basic
、cors
)。 Response.url
只读-
包含 Response 的 URL。
Response.useFinalURL
-
包含了一个布尔值,来标示这是否是该 Response 的最终 URL。
Response
实现了 Body
接口,所以以下属性亦可用:
Response.body
只读-
一个简单的 getter,用于暴露一个
ReadableStream
类型的 body 内容。 Response.bodyUsed
只读
方法
Response.clone()
-
创建一个
Response
对象的克隆。 Response.error()
-
返回一个绑定了网络错误的新的
Response
对象。 Response.redirect()
-
用另一个 URL 创建一个新的
Response
。
Response
实现了 Body
接口,所以以下方法同样可用:
Body.arrayBuffer()
-
读取
Response
对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为ArrayBuffer
格式的 Promise 对象。 Body.blob()
-
读取
Response
对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为Blob
格式的 Promise 对象。 Body.formData()
-
读取
Response
对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为FormData
格式的 Promise 对象。 Body.json()
-
读取
Response
对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为JSON
格式的 Promise 对象。 Body.text()
-
读取
Response
对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为USVString
格式的 Promise 对象。
示例
在我们的基础实例 (点击运行) 中,我们使用了一个简单的函数调用,调用了 fetch()
函数来获取一张图片并将其显示在 HTML 的 IMG 标签中,fetch()
函数返回了一个 Promise,它使用与资源获取操作相关联的 Response 对象进行解析。你会注意到,由于我们正在请求一张图片,我们需要运行 Body.blob
(Response
实现了),以为响应提供正确的 MIME 类型。
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
.then(function (response) {
return response.blob();
})
.then(function (blob) {
const objectURL = URL.createObjectURL(blob);
image.src = objectURL;
});
你也可以使用 Response.Response()
这样的构造方法,来创建自定义的 Response
对象:
const response = new Response();
规范
Specification |
---|
Fetch Standard # response-class |
浏览器兼容性
BCD tables only load in the browser