首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用fetch(),从非HTTP OK状态码读取响应正文并捕获异常

使用fetch()函数可以发送HTTP请求并获取响应。当响应的状态码为非HTTP OK状态码时,可以通过fetch()的异常处理机制来捕获异常。

完善且全面的答案如下:

fetch()是一种现代的Web API,用于发送HTTP请求并获取响应。它是基于Promise的异步操作,可以在前端开发中用于与后端服务器进行数据交互。

当使用fetch()发送请求时,服务器会返回一个响应对象。这个响应对象包含了很多有用的信息,包括响应的状态码。HTTP状态码是服务器返回给客户端的一个三位数的数字,用于表示请求的处理结果。

在fetch()中,当响应的状态码为非HTTP OK状态码(如404 Not Found、500 Internal Server Error等)时,fetch()并不会抛出错误,而是会认为请求成功,并返回一个resolve状态的Promise对象。这意味着我们需要手动检查响应的状态码,并根据需要进行处理。

为了从非HTTP OK状态码读取响应正文并捕获异常,我们可以在fetch()的Promise链中添加一个条件判断,检查响应的状态码。如果状态码不是HTTP OK状态码,我们可以通过抛出一个自定义的异常来捕获错误,并进行相应的处理。

以下是一个示例代码:

代码语言:txt
复制
fetch('https://example.com/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error, status = ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 捕获异常并进行处理
    console.error('Error:', error);
  });

在上面的代码中,我们首先使用fetch()发送了一个GET请求到https://example.com/api/data。然后,我们在第一个.then()中检查响应的状态码。如果状态码不是HTTP OK状态码,我们抛出一个自定义的异常,将错误信息作为异常的描述。在第二个.then()中,我们可以继续处理响应的正文数据。最后,我们使用.catch()来捕获异常,并进行相应的错误处理。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云API网关:腾讯云API网关是一种全托管的API服务,可帮助开发者更轻松地构建、发布、运行和维护规模化的API。它提供了丰富的功能,包括请求转发、访问控制、流量控制、缓存、监控等。了解更多信息,请访问:腾讯云API网关
  • 腾讯云云函数:腾讯云云函数是一种事件驱动的无服务器计算服务,可帮助开发者在云端运行代码,无需关心服务器的管理和维护。它支持多种编程语言,并提供了丰富的触发器和事件源。了解更多信息,请访问:腾讯云云函数

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

全面分析前端的网络请求方式

status 表示 http请求的状态, 初始值为 0。如果服务器没有显式地指定状态, 那么 status将被设置为默认值, 即 200。...response 返回响应正文,返回的类型由上面的 responseType决定。...异常处理 ? 可以发现,调用 reject有三种可能: 1.请求超时 2.请求失败 注意:当和服务器建立简介,收到服务器的异常状态如 404、500等并不能触发 onerror。...当网络故障时或请求被阻止时,才会标记为 reject,如跨域、 url不存在,网络异常等会触发 onerror。 所以使用fetch当接收到异常状态都是会进入then而不是catch。...当接收到一个代表错误的 HTTP 状态时, fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应状态是 404 或 500。

1.7K40

在 JS 中如何使用 Ajax 来进行请求

我们需要另外使用setRequestHeader设置请求标头“Content-Type” ,使用send方法中的JSON.stringify将JSON正文作为字符串发送。...如果来自服务器的响应带有任何状态(如200、404、500),则promise将被解析。响应对象可以在.then()块中处理。...错误处理 请注意,对于成功的响应,我们期望状态代码为200(正常状态),但是即使响应带有错误状态代码(例如404(未找到资源)和500(内部服务器错误)),fetch() API 的状态也是 resolved...我们可以在response 对象中看到HTTP状态HTTP状态,例如200。 ok –布尔值,如果HTTP状态代码为200-299,则为true。...我们还必须调用response.json()将响应对象转换为JSON 错误处理 我们来看看当HTTP GET请求抛出500错误时会发生什么: fetch('http://httpstat.us/500'

8.8K20

Python网络编程面试题精讲

易错点与避免策略: 忘记设置套接字为阻塞模式:在高并发场景下,若不设置阻塞模式,可能会因连接请求过多导致服务器响应缓慢甚至崩溃。...应充分考虑这些异常情况并进行妥善处理,如使用try-except结构捕获ConnectionAbortedError、TimeoutError等异常。...HTTP协议与requests库 面试题:使用requests库发送GET和POST请求,并处理响应。...易错点与避免策略: 忽略状态检查:在获取响应后,应检查HTTP状态(如通过response.status_code)判断请求是否成功。盲目处理响应内容可能导致程序逻辑错误。...未正确处理JSON响应:对于返回JSON格式数据的API,需使用response.json()方法解析而非直接读取文本内容。

11810

ASP.NET Core 错误处理(Handle Errors)

,则重新引发原始异常 edi.Throw(); } } 无响应正文Http错误状态处理 默认情况下,当ASP.NET Core遇到没有正文的400-599Http错误状态时...,不会为其提供页面,而是返回状态和空响应正文。...同样的,会有一个占位符{0},用于填充Http状态 向客户端发送Http状态302-已找到 然后将客户端重定向到指定的终结点,在该终结点中,可以针对不同错误状态分别进行处理 app.UseStatusCodePagesWithRedirects...code=404,而且,响应状态也变了,变成了200Ok。...同样的,会有一个占位符{0},用于填充Http状态 Url保持不变,并向客户端返回原始Http状态 执行备用管道,用于生成响应正文 // 注意,这里要分开写 app.UseStatusCodePagesWithReExecute

2K20

Dart服务器端 shelf包 原

适配器也可能使用window.location和window.history在浏览器中合成HTTP请求,或者它可能直接将请求HTTP客户端传递到Shelf处理程序。...以下函数可用于捕获单一错误否则那将是顶级的: /// 运行[callback] 并且捕获任何顶级错误. /// /// 如果在根错误区域中调用[this],它将只运行[callback] /// 返回结果...抛出异常时,它还包括异常的字符串和堆栈跟踪; 否则,它包括状态代码。...捕获异常的中间件应确保无需修改即可传递HijackExceptions。...可以使用createMiddleware创建一个简单的中间件 异常 HijackException 用于表示请求已被劫持的异常 除了创建可劫持请求的Shelf适配器之外的任何代码都不应捕获此内容。

3.7K10

JavaScript 编程精解 中文第三版 十八、HTTP 和表单

版本号后面是响应状态,首先是一个三位的状态,然后是一个可读的字符串。 HTTP/1.1 200 OK 以 2 开头的状态码表示请求成功。以 4 开头的状态码表示请求中有错误。...404 是最著名的 HTTP 状态了,表示找不到资源。以 5 开头的状态码表示服务器端出现了问题,而请求没有问题。...由于初始Promise在收到响应头文件后立即解析,并且读取响应正文可能需要一段时间,这又会返回一个Promise。...由于硬盘中读取文件会需要一些时间,接口必须是异步的,来避免文档的无响应问题。...本章小结 在本章中,我们讨论了 HTTP 协议的工作原理。 客户端发送一个请求,该请求包含一个方法(通常是GET)和一个标识资源的路径。 然后服务器决定如何处理请求,并用状态响应正文进行响应

3.8K20

JS 中的网络请求 AJAX, Fetch, WebSocket

我们还需要关心status属性它也是只读属性,它是这次响应中的 HTTP 数字状态。在请求之前和 XMLHttpRequest 出错时它为0。...fetch('http://a.com') .then(function(response) { if (response.ok) { return response.json(...Response 实现了 Body(代表响应/请求的正文,允许你声明其内容类型是什么以及应该如何处理。) 它有 9 个属性。...ok 只读 包含了一个布尔值来标示该Response成功(状态200-299) edirected 只读 表示该Response是否来自一个重定向,如果是的话,它的URL列表将会有多个 statusText... resolve 一个 ArrayBuffer 对象 blob blob()方法使用一个 Response 流,并将其读取完成 formData 将 Response 对象中的所承载的数据流读取封装成为一个对象

4.1K30

你的请求、响应异常规范了吗?

异常 异常如何捕获? 业务异常、校验异常如何合理的转换为友好的标准响应? 如何规避未捕获到的异常优雅返回标准响应? 这一些列的问题,就衍生出,我们该如何去规范的问题?...状态返回 返回额外返回数据 * * @param httpStatus http状态 * @param data 数据 */ public...,但是又是不得不处理的;并且他贯穿了整个业务的始终,请求到响应,都有可能牵扯到异常;所以一个好的异常处理机制,是整个代码健壮性必定要考虑的因素。...= data) { this.data = data; } } /** * 根据http状态实例化异常 返回数据 *...,返回参数错误的状态 @ExceptionHandler(BaseException.class) 自定义业务异常;直接将异常对象转换为响应对象;返回给前端 总结 请求、响应异常是每项业务不可或缺的一部分

1.6K40

10.6K star,一款开源HTTP测试工具,适合新手,简单、容易上手!

项目地址: https://github.com/Orange-OpenSource/hurl Hurl的主要特性和用途包括但不限: 请求发送与捕获:Hurl可以发送HTTP请求,捕获响应中的值。...这使得用户可以方便地执行各种HTTP操作,收集所需的响应数据。 查询与评估:Hurl支持对标头和正文响应进行查询和评估。...此外,Hurl还能够捕获请求中的特定值,响应头部和响应正文中的信息进行查询和评估。无论是对于初学者还是经验丰富的测试人员,Hurl都是一个值得考虑的选择。...隐式验证是通过在Hurl文件中直接指定期望的HTTP状态(这里是200)来完成的。如果服务器的响应状态与指定的不同,Hurl会报错。...显式断言使用assert关键字来检查响应体是否包含"OK"文本。如果不包含,测试将失败。 这些示例展示了Hurl的基本用法和一些高级特性,如变量捕获、链式请求和断言验证。

21610

Promise封装AJAX请求

它允许我们通过JavaScript发送HTTP请求,并在请求完成后处理响应数据,而无需刷新整个页面。常用的AJAX请求方法有XMLHttpRequest对象和fetch函数。...在本文中,我们将使用fetch函数作为示例来封装AJAX请求。...如果请求成功(状态为200-299),我们调用response.json()方法解析响应数据,通过resolve函数将Promise状态转变为已完成状态传递解析后的数据。...如果请求失败(状态不在200-299范围内),我们创建一个新的Error对象,通过reject函数将Promise状态转变为已失败状态传递错误信息。...如果在请求过程中发生了错误(如网络错误),则会通过.catch()方法捕获通过reject函数将Promise状态转变为已失败状态传递错误信息。

41010

Asp.Net Web API 2第七课——Web API异常处理

Exception Filters——注册异常过滤器   4.HttpError——HTTP错误 HttpResponseException——HTTP响应异常    如果一个Web API 控制器抛出一个未捕获异常...在默认情况下,大多数异常都被转换为一个带有状态500的内部服务器错误的HTTP响应。 这个HTTPResponseException类型是一个特殊的类型。...这种异常会返回你在异常构造器中指定的任何HTTP状态。例如,在以下方法中,如果这个id参数无效,那么会返回“404——未找到”。...以下是将NotImplementedException异常转换成HTTP状态“501 — 未实现”的一个过滤器: using System; using System.Net;...以下示例演示了如何用HttpError在响应体中返回HTTP状态“404 — 未找到”: public HttpResponseMessage GetProduct(int id) { Product

86130
领券