Skip to main content

Fetch Response 接口

Fetch API 的 Response 接口呈现了对一次请求的响应数据，fetch() 请求成功以后，得到一个 Response 对象，它对应服务器的 HTTP 回应。

一、Response 的构造器​

  • Response()：创建一个新的 Response 对象。

二、Response 的属性​

  • Response.headers（只读）：包含此 Response 所关联的 Headers 对象。

  • Response.ok（只读）：返回一个布尔值，表示请求是否成功，true 对应 HTTP 请求的状态码 200 到 299，false 对应其他的状态码。

  • Response.redirected（只读）：返回一个布尔值，表示请求是否发生过跳转。

  • Response.status（只读）：返回一个数字，表示 HTTP 回应的状态码（例如 200 表示成功请求）

  • Response.statusText（只读）：返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）

  • Response.type（只读）：包含 Response 的类型，返回请求的类型可能值如下：

    • basic：普通请求，即同源请求。
    • cors：跨域请求。
    • error：网络错误，主要用于 Service Worker。
    • opaque：如果 fetch() 请求的 type 属性设为 no-cors，就会返回这个值。
    • opaqueredirect：如果 fetch() 请求的 redirect 属性设为 manual，就会返回这个值。

  • Response.url（只读）：返回请求的 URL，如果 URL 存在跳转，该属性返回的是最终 URL。

  • Response.useFinalURL：包含了一个布尔值，来标示这是否是该 Response 的最终 URL。

  • Body.body（只读）：一个简单的 getter，用于暴露一个 ReadableStream 类型的 body 内容。

  • Body.bodyUsed（只读）：包含了一个布尔值来标示该 Response 是否读取过 Body。

三、Response 的方法​

  • Response.clone()：创建一个 Response 对象的克隆。

  • Response.error()：返回一个绑定了网络错误的新的 Response 对象。

  • Response.redirect()：用另一个 URL 创建一个新的 Response。

Response 对象根据服务器返回的不同类型的数据，提供了不同的读取方法：

  • response.text()：得到文本字符串。

  • response.json()：得到 JSON 对象。

  • response.blob()：得到二进制 Blob 对象。

  • response.formData()：得到 FormData 表单对象。

  • response.arrayBuffer()：得到二进制 ArrayBuffer 对象。

上面 5 个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。

四、Response 的应用​

这里调用 fetch() 函数来获取一张图片并将其显示在 HTML 的 IMG 标签中, fetch() 函数返回了一个 Promise，它使用与资源获取操作相关联的 Response 对象进行解析，由于正在请求一张图片，所以需要运行 response.blob()，以为响应提供正确的 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();