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 | 不支持 |