javascript基础学习系列三百六十九：Response对象

顾名思义，Response 对象是获取资源响应的接口。这个接口暴露了响应的相关信息，也暴露了使
用响应体的不同方式。
注意 与响应体相关的属性和方法将在本章24.5.6节介绍。

1. 创建 Response 对象

可以通过构造函数初始化 Response 对象且不需要参数。此时响应实例的属性均为默认值，因为它 23 并不代表实际的 HTTP 响应:

let r = new Response();
console.log(r);
// Response {
//   body: (...)
     //   bodyUsed: false
    //   headers: Headers {}
// ok: true
    //   redirected: false
    //   status: 200
    //   statusText: "OK"
// type: "default" 26
// url: "" // }

Response 构造函数接收一个可选的 body 参数。这个 body 可以是 null，等同于 fetch()参数 init 中的 body。还可以接收一个可选的 init 对象，这个对象可以包含下表所列的键和值。

网络请求与远程资源 键值

headers
status
statusText
必须是 Headers 对象实例或包含字符串键/值对的常规对象实例 默认为没有键/值对的 Headers 对象
表示 HTTP 响应状态码的整数
默认为 200
表示 HTTP 响应状态的字符串 默认为空字符串
可以像下面这样使用 body 和 init 来构建 Response 对象:

let r = new Response('foobar', {
      status: 418,
      statusText: 'I\'m a teapot'
    });
    console.log(r);
// Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: false
    //   redirected: false
// status: 418
// statusText: "I'm a teapot"
    //   type: "default"
// url: "" // }

大多数情况下，产生 Response 对象的主要方式是调用 fetch()，它返回一个最后会解决为 Response 对象的期约，这个 Response 对象代表实际的 HTTP 响应。下面的代码展示了这样得到的 Response 对象:

   fetch('https://foo.com')
      .then((response) => {
        console.log(response);
      });
// Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: true
    //   redirected: false
    //   status: 200
    //   statusText: "OK"
    //   type: "basic"
    //   url: "https://foo.com/"
    // }

Response 类还有两个用于生成 Response 对象的静态方法:Response.redirect()和 Response. error()。前者接收一个 URL 和一个重定向状态码(301、302、303、307 或 308)，返回重定向的 Response 对象:

console.log(Response.redirect('https://foo.com', 301)); // Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: false
    //   redirected: false
// status: 301
    //   statusText: ""
    //   type: "default"
// url: "" // }

提供的状态码必须对应重定向，否则会抛出错误:

Response.redirect('https://foo.com', 200);
// RangeError: Failed to execute 'redirect' on 'Response': Invalid status code

另一个静态方法 Response.error()用于产生表示网络错误的 Response 对象(网络错误会导致 fetch()期约被拒绝)。

   console.log(Response.error());
    // Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: false
    //   redirected: false
// status: 0
    //   statusText: ""
    //   type: "error"
// url: "" // }

读取响应状态信息

Response 对象包含一组只读属性，描述了请求完成后的状态，如下表所示。
属性值

headers ok redirected status statusText
type
url
响应包含的 Headers 对象
布尔值，表示 HTTP 状态码的含义。200~299 的状态码返回 true，其他状态码返回 false
布尔值，表示响应是否至少经过一次重定向
整数，表示响应的 HTTP 状态码
字符串，包含对 HTTP 状态码的正式描述。这个值派生自可选的 HTTP Reason-Phrase 字段，因此如果服 务器以 Reason-Phrase 为由拒绝响应，这个字段可能是空字符串
字符串，包含响应类型。可能是下列字符串值之一
 basic:表示标准的同源响应
 cors:表示标准的跨源响应
 error:表示响应对象是通过 Response.error()创建的  opaque:表示 no-cors 的 fetch()返回的跨源响应
 opaqueredirect:表示对 redirect 设置为 manual 的请求的响应
包含响应 URL 的字符串。对于重定向响应，这是最终的 URL，非重定向响应就是它产生的

网络请求与远程资源

以下代码演示了返回 200、302、404 和 500 状态码的 URL 对应的响应:

fetch('//foo.com').then(console.log);
    // Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: true
    //   redirected: false
    //   status: 200
    //   statusText: "OK"
    //   type: "basic"
    //   url: "https://foo.com/"
    // }
    fetch('//foo.com/redirect-me').then(console.log);
    // Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: true
// redirected: true
    //   status: 200
    //   statusText: "OK"
    //   type: "basic"
// url: "https://foo.com/redirected-url/" // }
fetch('//foo.com/does-not-exist').then(console.log); // Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: false
    //   redirected: true
// status: 404
// statusText: "Not Found"
    //   type: "basic"
    //   url: "https://foo.com/does-not-exist/"
    // }
    fetch('//foo.com/throws-error').then(console.log);
    // Response {
    //   body: (...)
    //   bodyUsed: false
    //   headers: Headers {}
// ok: false
    //   redirected: true
// status: 500
// statusText: "Internal Server Error"
    //   type: "basic"
    //   url: "https://foo.com/throws-error/"
    // }