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/"
    // }
  • 13
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值