Response - 表示对请求的响应
Response
是 Fetch API 的接口,表示对请求的响应。
您可以使用 Response.Response()
构造函数创建一个新的 Response
对象,但是更有可能遇到作为另一个 API 操作(例如服务 Worker 的 FetchEvent.respondWith
或简单的 GlobalFetch.fetch()
)的结果而返回的 Response
对象。
您可以使用 Request()
构造函数创建一个新的 Request
对象。但是更有可能遇到作为另一个 API 操作(例如服务 Worker 的 FetchEvent.request
)的结果而返回的 Response
对象。
构造函数
Response()
创建一个新的 Response
对象。
属性
Response.headers
只读
与响应相关联的 Headers
对象。
Response.ok
只读
一个布尔值,指示响应是否成功(状态在 200
-299
范围内)。
Response.redirected
只读
指示响应是否是重定向的结果(即,其 URL 列表包含多个条目)。
Response.status
只读
响应的状态码。(成功将为 200
)。
Response.statusText
只读
与状态代码相对应的状态消息。(例如,OK
代表 200
)。
Response.trailers
一个 Promise
,解析为一个对象,该对象为 Response.headers
中, HTTP Trailer
标头的值。
Response.type
只读
响应的类型(例如,basic
,cors
)。
Response.url
只读
响应的 URL。
Response.useFinalURL
一个布尔值,指示这是否是响应的最终 URL。
Body
接口的方法
Response
实现了 Body
,因此它还继承了以下属性:
body
只读
一个简单的获取方法,用于获取主体内容的 ReadableStream
。
Body.bodyUsed
只读
存储一个 Boolean
,它声明是否已在响应中使用主体。
方法
Response.clone()
创建 Response
对象的副本。
Response.error()
返回与网络错误关联的新 Response
对象。
Response.redirect()
使用其他 URL 创建新的响应。
Body
接口方法
Request
实现了 Body
,因此它还具有以下可用方法:
Body.arrayBuffer()
接受一个 Response
流,并将其读取到完成。返回一个 Promise,解析为请求主体的 ArrayBuffer
表示形式。
Body.blob()
接受一个 Response
流,并将其读取到完成。返回一个 Promise,解析为请求主体的 Blob
表示形式。
Body.formData()
接受一个 Response
流,并将其读取到完成。返回一个 Promise,解析为请求主体的 FormData
表示形式。
Body.json()
接受一个 Response
流,并将其读取到完成。返回一个 Promise,解析为请求主体的 JSON
表示形式。
Body.text()
接受一个 Response
流,并将其读取到完成。返回一个 Promise,解析为请求主体的 USVString
(文本)表示形式。
实例
在我们的基本 fetch 实例(运行在线实例),我们使用一个简单的 fetch()
调用来抓取图像并将其显示在 <img>
元素中。fetch()
调用返回一个 promise,该 promise 解析为与资源获取操作关联的 Response
对象。
您会注意到,由于我们正在请求图像,因此我们需要运行 Body.blob
(Response
实现了 Body
),来为响应提供正确的 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();
规范
规范 | 状态 | 备注 |
---|---|---|
Fetch Response 的定义 |
现行的标准 | 初始定义 |
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 42 41 | 支持 | 39 34 | 不支持 | 29 28 | 10.1 |
Response() 构造函数 | 42 41 | 15 | 39 34 | 不支持 | 29 28 | 10.1 |
clone | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 不支持 |
error | 支持 | 16 | 支持 | 不支持 | 支持 | 支持 |
headers | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 不支持 |
ok | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 10.1 |
redirect | 支持 | 16 | 支持 | 不支持 | 支持 | 支持 |
redirected | 60 | 16 | 49 | 不支持 | 47 | 不支持 |
status | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 10.1 |
statusText | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 不支持 |
trailer | 不支持 | 未知 | 未知 | 不支持 | 未知 | 未知 |
type | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 不支持 |
url | 42 41 | 14 | 39 34 | 不支持 | 29 28 | 不支持 |
useFinalURL | 42 41 | 支持 | 39 34 | 不支持 | 29 28 | 不支持 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 42 41 | 42 41 | 未知 | 支持 | 未知 | 29 28 | 10.3 |
Response() 构造函数 | 42 41 | 42 41 | 未知 | 支持 | 未知 | 29 28 | 10.3 |
clone | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 不支持 |
error | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 不支持 | 不支持 |
headers | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 不支持 |
ok | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 10.3 |
redirect | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 不支持 | 不支持 |
redirected | 60 | 60 | 未知 | 49 | 未知 | 44 | 不支持 |
status | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 10.3 |
statusText | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 不支持 |
trailer | 不支持 | 不支持 | 未知 | 未知 | 未知 | 未知 | 未知 |
type | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 不支持 |
url | 不支持 | 不支持 | 未知 | 不支持 | 未知 | 29 28 | 不支持 |
useFinalURL | 不支持 | 不支持 | 未知 | 39 34 | 未知 | 29 28 | 不支持 |