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 APIResponse 接口呈现了对一次请求的响应数据。

你可以使用 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 接口,所以以下属性亦可用:

Response.body 只读

一个简单的 getter,用于暴露一个 ReadableStream 类型的 body 内容。

Response.bodyUsed 只读

包含了一个布尔值来标示该 Response 是否读取过 Body

方法

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.blobResponse 实现了),以为响应提供正确的 MIME 类型。

js
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 对象:

js
const response = new Response();

规范

Specification
Fetch Standard
# response-class

浏览器兼容性

BCD tables only load in the browser

参见