Response

Baseline 广泛可用 *

此特性已得到良好确立,可跨多种设备和浏览器版本使用。自 2017 年 3 月起,所有浏览器均支持此特性。

* 此特性的某些部分可能存在不同级别的支持。

注意:此功能在 Web Workers 中可用。

Web API 的 Response 接口代表对请求的响应。

你可以使用 Response() 构造函数创建一个新的 Response 对象,但你更有可能遇到 Response 对象作为另一个 API 操作的结果返回——例如,Service Worker 的 FetchEvent.respondWith,或者简单的 fetch()

构造函数

Response()

创建一个新的 Response 对象。

实例属性

Response.body 只读

包含正文内容的 ReadableStream

Response.bodyUsed 只读

存储一个布尔值,声明正文是否已被用于响应。

Response.headers 只读

与响应关联的 Headers 对象。

Response.ok 只读

一个布尔值,指示响应是否成功(状态码在 200299 之间)。

Response.redirected 只读

指示响应是否是重定向的结果(即,其 URL 列表包含多个条目)。

Response.status 只读

响应的状态码。(成功时为 200)。

Response.statusText 只读

与状态码对应的状态消息。(例如,200OK)。

Response.type 只读

响应的类型(例如,basiccors)。

Response.url 只读

响应的 URL。

静态方法

Response.error()

返回一个与网络错误关联的新 Response 对象。

Response.redirect()

返回一个 URL 不同的新响应。

Response.json()

返回一个用于返回提供的 JSON 编码数据的新的 Response 对象。

实例方法

Response.arrayBuffer()

返回一个 Promise,该 Promise 解析为响应正文的 ArrayBuffer 表示形式。

Response.blob()

返回一个 Promise,该 Promise 解析为响应正文的 Blob 表示形式。

Response.bytes()

返回一个 Promise,该 Promise 解析为响应正文的 Uint8Array 表示形式。

Response.clone()

创建一个 Response 对象的副本。

Response.formData()

返回一个 Promise,该 Promise 解析为响应正文的 FormData 表示形式。

Response.json()

返回一个 Promise,该 Promise 解析为将响应正文文本解析为 JSON 的结果。

Response.text()

返回一个 Promise,该 Promise 解析为响应正文的文本表示形式。

示例

获取图片

在我们 基本的 fetch 示例实时运行示例)中,我们使用一个简单的 fetch() 调用来获取图片并将其显示在 <img> 元素中。fetch() 调用返回一个 Promise,该 Promise 解析为与资源获取操作关联的 Response 对象。

您会注意到,因为我们请求的是图片,所以我们需要运行 Response.blob 以使响应具有正确的 MIME 类型。

js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });

您还可以使用 Response() 构造函数来创建自己的自定义 Response 对象

js
const response = new Response();

PHP 调用

在这里,我们调用一个生成 JSON 字符串的 PHP 程序文件,并将结果显示为 JSON 值。

js
// Function to fetch JSON using PHP
const getJSON = async () => {
  // Generate the Response object
  const response = await fetch("getJSON.php");
  if (response.ok) {
    // Get JSON value from the response body
    return response.json();
  }
  throw new Error("*** PHP file not found");
};

// Call the function and output value or error message to console
getJSON()
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

规范

规范
Fetch
# response-class

浏览器兼容性

另见