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

相关链接