响应

基线 广泛可用

此功能已在许多设备和浏览器版本中得到完善,自 2017 年 3 月.

ResponseFetch API 中表示对请求的响应的接口。

您可以使用 Response() 构造函数创建一个新的 Response 对象,但您更有可能遇到作为另一个 API 操作结果返回的 Response 对象,例如,服务工作者 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()

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

实例方法

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() 调用来获取图像并在 <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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅