Response

 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 的类型(例如,basiccors)。
Response.url 只读
包含 Response 的 URL。
Response.useFinalURL
包含了一个布尔值,来标示这是否是该 Response 的最终 URL。

Response 实现了 Body 接口,所以以下属性亦可用:

Body.body (en-US) 只读
一个简单的 getter,用于暴露一个 ReadableStream 类型的 body 内容。
Body.bodyUsed (en-US) 只读
包含了一个布尔值 (en-US)来标示该 Response 是否读取过 Body

方法

Response.clone()
创建一个 Response 对象的克隆。
Response.error()
返回一个绑定了网络错误的新的 Response 对象。
Response.redirect()
用另一个 URL 创建一个新的 Response

Response 实现了 Body 接口,所以以下方法同样可用:

Body.arrayBuffer() (en-US)
读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 ArrayBuffer 格式的 Promise 对象。
Body.blob() (en-US)
读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 Blob 格式的 Promise 对象。
Body.formData() (en-US)
读取Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 FormData 格式的 Promise 对象。
Body.json() (en-US)
读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 JSON 格式的 Promise 对象。
Body.text() (en-US)
读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 USVString 格式的 Promise 对象。

示例

在我们的基础实例 (点击运行) 中 , 我们使用了一个简单的函数调用 , 调用了 fetch() 函数来获取一张图片并将其显示在 HTML 的 IMG 标签中 , fetch() 函数返回了一个 Promise,它使用与资源获取操作相关联的 Response 对象进行解析。你会注意到,由于我们正在请求一张图片,我们需要运行Body.blob (en-US)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 Status Comment
Fetch
Response
Living Standard Initial definition

浏览器兼容性

BCD tables only load in the browser

相关链接