跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

JavaScript 响应对象 Response 详解

JavaScript Response 对象封装 HTTP 响应信息,支持通过构造函数手动实例化或经由 fetch 获取。构造函数允许自定义 body 及状态码等初始化参数,而静态方法 redirect 和 error 分别用于构建重定向与错误响应。掌握该对象属性与方法,能有效提升网络请求处理与异常捕获的灵活性。

霸天发布于 2024/5/30更新于 2026/10/2585 浏览
JavaScript 响应对象 Response 详解

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()。

Response.redirect()

前者接收一个 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.error() 用于产生表示网络错误的 Response 对象(网络错误会导致 fetch() Promise 被拒绝)。

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

目录

  1. Response 对象简介
  2. 创建 Response 对象
  3. 静态方法
  4. Response.redirect()
  5. Response.error()

更多推荐文章

查看全部
  • 宇树 G1 机器人开发:有线与无线连接配置实战
  • Linux 源配置与包管理:CentOS/Ubuntu 更新及 Vim 基础
  • 基于 JavaAI 的电商系统核心模块开发实战指南
  • Coze 低代码 AI 智能体平台:100 个落地场景与发布指南
  • 国产时序数据库解析与金仓融合多模架构实践
  • Stable Diffusion 控制光线的三种方式
  • 数据结构:双向链表实现与算法实战
  • VS Code 远程连接服务器后 GitHub Copilot 无法使用
  • 网络安全基础概念、核心领域及常见威胁解析
  • MambaYOLO:用状态空间模型做目标检测,简单且高效
  • RabbitMQ 事务机制与消息限流实战详解
  • 2024 年国内主流人工智能大模型汇总
  • Python 中 GraphQL 的完整实现:从基础到企业级实战
  • 基于 HTML5+CSS3+JavaScript 的高木同学圣诞主题 GalGame 开发实战
  • Git 版本控制入门及 Gitee 远程仓库协作指南
  • 网络安全工程师面试真题汇总:Web 安全、内网渗透与系统加固
  • 双指针算法核心概念与 C++ 经典例题解析
  • 本地搭建 Stable Diffusion AI 绘画工具完整指南
  • 从零开始手写 Vision Transformer 实现图像分类任务
  • 2026 主流 AI 写作工具深度测评:网文与剧本创作对比

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online