JavaScript Response 对象详解与使用指南

顾名思义，Response 对象是获取资源响应的接口。这个接口暴露了响应的相关信息，也暴露了使用响应体的不同方式。

创建 Response 对象

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

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

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

键	值
headers	必须是 Headers 对象实例或包含字符串键/值对的常规对象实例 默认为没有键/值对的 Headers 对象
status	表示 HTTP 响应状态码的整数 默认为 200
statusText	表示 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 对象的 Promise，这个 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() Promise 被拒绝）。

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