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

尝试使用fetch而不是axios发出POST请求,但是来自fetch请求的响应返回错误,而axios不返回错误

问题描述: 当使用fetch而不是axios发出POST请求时,返回的响应出现错误,而axios则没有错误返回。

解答: fetch和axios都是用于发送HTTP请求的工具,但它们在一些方面有所不同。

fetch是浏览器内置的API,用于发送网络请求。它使用Promise来处理响应,返回一个包含响应信息的Promise对象。然而,fetch在处理错误时的表现方式与axios不同。

当使用fetch发送POST请求时,如果服务器返回的状态码不是200,fetch并不会抛出一个错误。相反,它会将Promise的状态标记为resolved,并返回一个表示错误的响应对象。这意味着即使请求失败,fetch也不会抛出异常,需要手动检查响应的状态码来判断是否出现错误。

相比之下,axios在处理错误时更加直观。它会根据服务器返回的状态码自动抛出一个错误。这使得我们能够更容易地捕获和处理请求错误。

如果你想使用fetch而不是axios,但仍希望能够像axios一样处理错误,可以通过检查fetch返回的响应对象的ok属性来判断请求是否成功。如果ok为true,则表示请求成功;如果ok为false,则表示请求失败。

以下是一个使用fetch发送POST请求并处理错误的示例代码:

代码语言:txt
复制
fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (response.ok) {
    // 请求成功
    return response.json();
  } else {
    // 请求失败
    throw new Error('请求失败');
  }
})
.then(data => {
  // 处理响应数据
})
.catch(error => {
  // 处理错误
});

在这个示例中,我们首先检查响应的ok属性。如果为true,则将响应转换为JSON格式并继续处理数据。如果为false,则抛出一个错误,进入catch块进行错误处理。

推荐的腾讯云相关产品: 腾讯云提供了丰富的云计算产品和服务,以下是一些与云计算相关的推荐产品:

  1. 云服务器(CVM):提供弹性计算能力,可根据业务需求快速创建和管理虚拟服务器实例。 产品介绍链接:https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务,支持自动备份、容灾等功能。 产品介绍链接:https://cloud.tencent.com/product/cdb_mysql
  3. 云存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。 产品介绍链接:https://cloud.tencent.com/product/cos
  4. 人工智能机器学习平台(AI Lab):提供丰富的人工智能算法和模型,帮助开发者快速构建和部署AI应用。 产品介绍链接:https://cloud.tencent.com/product/ailab

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

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

相关·内容

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

来自服务器响应存储在responseText变量中,该变量使用JSON.parse()转换为JavaScript 对象。...现代fetch API允许我们发出类似于XMLHttpRequest(XHR)网络请求。 主要区别在于fetch() API使用Promises,它使 API更简单,更简洁,避免了回调地狱。...如果存在网络错误,则将拒绝,这会在.catch()块中处理。 如果来自服务器响应带有任何状态码(如200、404、500),则promise将被解析。响应对象可以在.then()块中处理。...错误处理 请注意,对于成功响应,我们期望状态代码为200(正常状态),但是即使响应带有错误状态代码(例如404(未找到资源)和500(内部服务器错误)),fetch() API 状态也是 resolved...我个人更喜欢使用Axios API不是fetch() API,原因如下: 为GET 请求提供 axios.get(),为 POST 请求提供 axios.post()等提供不同方法,这样使我们代码更简洁

8.9K20

Fetch还是Axios——哪个更适合HTTP请求

如果我们传递 options,请求总是 GET,它从给定 URL 下载内容。 在选项参数里面,我们可以传递方法或头信息,所以如果我们想使用 POST 方法或其他方法,我们必须使用这个可选数组。...,我返回了数据,但是如果请求以任何方式失败,我就能够检查 .catch() 部分中错误类型并返回正确消息。...对于 .fetch() 方法,就比较复杂了。每次我们从 .fetch() 方法中得到响应时,我们需要检查状态是否成功,因为即使不是,我们也会得到响应。...,如果响应有状态 ok,那么我就可以处理并使用 .json() 方法,但如果没有,我必须在 .then() 里面返回错误。...为了方便和正确错误处理,对于你项目来说,axios 绝对会是一个更好解决方案,但如果你正在构建一个只有一两个请求小项目,使用 .fetch() 是可以,但你需要记住正确处理错误

4.9K20
  • vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    一晃眼,JQuery ajax早已不能专美于前,axiosfetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间区别,并给出自己一些理解。...但是我最近在使用fetch时候,也遇到了不少问题: fetch是一个低层次API,你可以把它考虑成原生XHR,所以使用起来并不是那么舒服,需要进行封装 例如: 1)fetch只对网络请求报错,对...我们都知道因为同源策略问题,浏览器请求是可能随便跨域——一定要有跨域头或者借助JSONP,但是fetch中可以设置mode为"no-cors"(跨域),如下所示: fetch('/users.json...总之,fetch现在还不是很好用,我尝试过几个fetch封装包,都还不尽如人意。...data: { list: [ ... ] } } 在响应拦截器中处理完数据后将会返回: { list: [ ... ] } #业务错误 当发生错误返回数据示例

    2.6K20

    目前5种最流行发送HTTP请求方法

    在这个实现中,我们必须使用响应。ok字段检查响应是否包含HTTP错误,因为在catch方法中捕获错误属于网络级别,不是应用程序级别。...使用Fetch发出POST请求也遵循与前面示例类似的模式。这里,我们使用config对象来指定请求方法并传递需要发送数据。...当使用Axios发出GET请求时,我们可以使用专用Axios.GET()方法来编译请求。...在catch方法内部,我们可以使用一个错误来区分HTTP错误响应检查,它存储HTTP错误代码。 为了使用Axios发送POST请求,我们使用专用Axios ....它自动地将响应体解析为Javascript对象,不需要开发人员干涉。它还在catch方法中捕获HTTP错误,我们可以使用错误来识别该方法。响应领域。如果请求由于网络相关错误失败,则这些错误

    3.1K20

    Fetch vs Axios

    在本篇指南中,我们将会介绍AxiosFetch,并对它们进行比较,以便让我们做出明智决定去选择。 快速概览 Fetch API是一个接口,暴露了一个叫做fetch()方法,用于发出网络请求。...比较FetchAxios特性 让我们从语法开始。 语法 Fetch接收两个参数。第一个参数是我们要获取资源URL。第二个参数是可选参数,它是一个对象,包含发出请求配置项。...错误处理 fetchaxios返回一个被解决(resolved)或被拒绝(rejected)promise。当promise被拒绝时,我们可以使用.catch() 来处理错误。...与Fetch方法相比,使用axios处理错误方式更简洁。 从axios开始,使用.catch()来处理典型错误。...error对象上request属性表示发出了一个请求,但客户端没有收到响应。否则,如果没有response 或request 属性,则表示在设置网络请求时发生错误

    1.3K10

    ajax和fetchaxios优缺点以及比较

    但是随着react,vue等前端框架兴起,jquery早已不复当年之勇。很多情况下我们只需要使用ajax,但是却需要引入整个jquery,这非常不合理,于是便有了fetch解决方案。...在MDN上,讲到它跟jquery ajax区别,这也是fetch很奇怪地方: 当接收到一个代表错误 HTTP 状态码时,从 fetch()返回 Promise 不会被标记为 reject, 即使该...相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 返回 ok 属性设置为 false ), 仅当网络故障时或请求被阻止时,才会标记为 reject。...所以fetch不是开箱即用。 另外,fetch还不支持超时控制。...axios 是一个基于Promise 用于浏览器和 nodejs HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持

    9.3K20

    Vue 前后端交互基础

    这种应用模式比较适合纯网页应用,但是当后端对接 App 时,App 可能并不需要后端返回一个 HTML 网页,仅仅是数据本身,所以后端原本返回网页接口不再适用于前端 App 应用,为了对接 App...Ajax 本质是使用 XMLHttpRequest 对象来请求数据, XMLHttpRequest 对象是通过事件模式来实现返回数据处理。...Fetch 不是 Ajax 进一步封装,而是原生 JS ,没有使用 XMLHttpRequest。...1.3.2 Fetch 使用 ☞ 语法 // fetch 参数为请求路径,默认为 get 请求 fetch("url").then(function(data) { // 成功返回 data...API  ♞ 拦截请求响应  ♞ 转换请求数据和响应数据  ♞ 取消请求  ♞ 自动转换 JSON 数据  ♞ 客户端支持防御 XSRF 1.4.2 axios 使用 ☞ 安装 #

    2.1K50

    前端成神之路-vue04

    不是ajax进一步封装,而是原生js,没有使用XMLHttpRequest对象。...(url).then() 第一个参数请求路径 Fetch返回Promise 所以我们可以使用then 拿到请求成功结果 */ fetch('http://localhost...,UPDATE,PATCH和PUT 默认是 GET 请求 需要在 options 对象中 指定对应 method method:请求使用方法 post 和 普通 请求时候 需要在options...用fetch来获取数据,如果响应正常返回,我们首先看到是一个response对象,其中包括返回一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式数据,比如JSON,BLOB...例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易 响应拦截器 响应拦截器作用是在接收到响应后进行一些操作 例如在服务器返回登录状态失效,需要重新登录时候,跳转到登录页

    3.7K10

    前端三大框架之Vue-day04

    不是ajax进一步封装,而是原生js,没有使用XMLHttpRequest对象。...(url).then() 第一个参数请求路径 Fetch返回Promise 所以我们可以使用then 拿到请求成功结果 */ fetch('http://localhost...,UPDATE,PATCH和PUT 默认是 GET 请求 需要在 options 对象中 指定对应 method method:请求使用方法 post 和 普通 请求时候 需要在options...用fetch来获取数据,如果响应正常返回,我们首先看到是一个response对象,其中包括返回一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式数据,比如JSON,BLOB...例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易 响应拦截器 响应拦截器作用是在接收到响应后进行一些操作 例如在服务器返回登录状态失效,需要重新登录时候,跳转到登录页

    3.2K20

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

    替代者 axios、request等众多开源库 三、关于网络请求疑问 Ajax出现解决了什么问题 原生 Ajax如何使用 jQuery网络请求方式 fetch用法以及坑点 如何正确使用 fetch...八、fetch使用 一个基本 fetch请求: const options = { method: "POST", // 请求参数 headers: { "Content-Type":...当网络故障时或请求被阻止时,才会标记为 reject,如跨域、 url不存在,网络异常等会触发 onerror。 所以使用fetch当接收到异常状态码都是会进入then不是catch。...fetch封装好了,可以愉快使用了。 嗯,axios真好用... 十二、跨域总结 谈到网络请求,就不得不提跨域。 浏览器同源策略限制了从同一个源加载文档或脚本如何与来自另一个源资源进行交互。...、axios等并没有直接提供对 jsonp支持,如果需要使用这种方式,我们可以尝试进行手动封装: (function (window,document) { "use strict"; var

    1.8K40

    如何解决前端常见竞态问题

    会先后请求 data2 与 data3,分页器显示当前在第三页,并且进入 loading。 但由于网络不确定性,先发出请求不一定先响应,有可能 data3 比 data2 先返回。...主要区别在于 fetch 使用了 promise,要中止 fetch 发出请求,需要使用 AbortController。...因此解决竞态问题方法,除了「取消请求」,还可以「忽略请求」。 当请求响应时,只要判断返回数据是否需要,如果不是则忽略即可。 忽略过期请求 我们又有哪些方式来忽略过期请求呢?...但是取消请求也依赖底层请求 API,比如 XMLHttpRequest 需要用 abort, fetch API 和 axios 需要用 AbortController。...一个更实际,一个更通用,两者使用需要根据具体场景来权衡。 总结 在前端常见搜索,分页,选项卡等切换场景中。由于网络不确定性,先发出请求不一定先响应,这会造成竞态问题。

    1.9K10

    Vue 09.前后端交互

    fetch不是ajax进一步封装,而是原生js,没有使用XMLHttpRequest对象。...基本使用 /* fetch(url).then() 第一个参数请求路径,Fetch返回Promise,所以可以使用then拿到请求成功结果 */ fetch('http://localhost...(); }).then(function(data) { console.log(data) }); 响应结果 用fetch来获取数据,如果响应正常返回,我们首先看到是一个response对象,其中包括返回一堆原始字节...基于promise用于浏览器和node.jshttp客户端 支持浏览器和node.js 支持promise 能拦截请求响应 自动转换JSON数据 能转换请求响应数据 基本使用 axios.get...}) 响应拦截器 响应拦截器作用是在接收到响应后进行一些操作 例如在服务器返回登录状态失效,需要重新登录时候,跳转到登录页 axios.interceptors.response.use(function

    6K30

    【面试题】HTTP知识点整理(附答案)

    http3 HTTP/2 缺点 尽管HTTP/2解决了很多1.1问题,但HTTP/2仍然存在一些缺陷,这些缺陷并不是来自于HTTP/2协议本身,而是来源于底层TCP协议,我们知道TCP链接是可靠连接...参数: GET 一般放在 URL 中,因此不安全,POST 放在请求体中,更适合传输敏感信息。 幂等: GET是幂等POST不是。...(幂等表示执行相同操作,结果也是相同) TCP: GET请求会把浏览器会把http header和data一次性发出去,POST会分成两个TCP数据包,首先发Header部分,如果服务器响应100...204 No Content 服务器接收请求已成功处理,但是返回响应报文中不含实体主体部分,另外,也不允许返回任何实体主体 一般在只需要从客户端往服务器发送信息,而对客户端不需要发送新信息内容情况下使用...fetch不是ajax进一步封装,而是原生js,没有使用XMLHttpRequest对象 fetch(url) .then(response => { if (response.ok

    1.4K30

    【面试Vue全家桶】vue前端交互模式-es7​语法结构?asyncawait

    vue那种。异步接口调用,常常使用语法,promise概念是什么呢?调用接口方式,第一种为,fetch进行接口调用,第二种为,axios进行接口调用。 es7语法结构?...HTTP请求方式,第一种,使用GET为查询,第二种,使用POST为添加,第三种,使用PUT为修改,第四种,使用DELETE为删除。...,并将异步操作结果,作为参数传递出去,reject作用是将promise对象状态从“未完成”变成“失败”,就是从Pending变成rejected,在异步操作失败时调用,并将异步操作报出错误,...fetch请求参数 method(string) http请求方法,默认为GET,可以使用POST,PUT,DELETE body(string) http请求参数 headers(object) http...;},function(err){// 处理响应错误信息}); 在获取数据之前对数据做一些加工处理。

    1.5K10

    Fetch了解一下呀!

    一旦Response被返回,就可以使用一些方法来定义内容形式,以及应当如何处理内容,你也可以通过 Request() 和 Response() 构造函数直接创建请求响应但是我们建议这么做。...Fetch 接口 Headers:相当于 response/request 头信息 Request:相当于一个资源请求 Response:相当于请求响应 使用 Fetch Fetch API 提供了一个...fetch 规范与jQuery.ajax()主要有以下不同: 当接收到一个代表错误 HTTP 状态码时,从 fetch() 返回Promise不会被标记为 reject,即使响应 HTTP 状态码是...在用法上,fetch()接受一个URL字符串作为参数,默认向该网址发出GET请求返回一个 Promise 对象。...整理上看和axios类似,相同点都是基于ES 6 Promise对象,在Node环境,都是基于HTTP模块实现,不同点,axios在浏览器中,是基于XMLHttpRequests来实现异步通信,fetch

    5K10

    Ajax,jQuery ajax,axiosfetch介绍、区别以及优缺点

    jQuery ajax - ajax() 方法 「Axiosaxios不是原生JS,需要进行安装,它不但可以在客户端使用,也可以在nodejs端使用Axios也可以在请求响应阶段进行拦截。...03 Axios 先来看看官网案例: 执行 GET 请求 执行 POST 请求 执行多个并发请求 Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,未来App趋势是轻量化和细化...请注意,fetch规范与jQuery.ajax()主要有两种方式不同,牢记: ★ 当接收到一个代表错误 HTTP 状态码时,从 fetch()返回 Promise 不会被标记为 reject, 即使该...最简单用法是只提供一个参数用来指明想fetch()到资源路径,然后返回一个包含响应结果promise(一个 Response 对象)。 当然它只是一个 HTTP 响应不是真的JSON。...怎么也比不上能力:跨域处理 我们都知道因为同源策略问题,浏览器请求是可能随便跨域——一定要有跨域头或者借助JSONP,但是fetch中可以设置mode为"no-cors"(跨域),如下所示

    2.3K62

    封装ajax、axios请求

    一般交互都是基于JavaScriptXMLHttpRequest来做封装,目前比较常用有Ajax、Fetchaxios等。但是很多开发时候都是直接用这几个给方法,没有二次封装。...由于本人从未用过Fetch,所以只讲解一下Ajax和axios本人封装。...或者是错误时候,是否也不需要每一次都做判断,只要做一次判断,也就是全局方法。再有就是参数,是否使用get还是post(一般只用这两个)直接用参数传参,数据地址也是。...Axios封装跟Ajax差不多,反而更简单,因为axios已经帮我们设定好了响应请求过程。...以上就是想要分享封装请求,我封装不是很好,只是想让大家知道请求最好是自己分装一个适合。 (完)

    1K10

    面试官不要再问我axios了?我能手写简易版axios

    juejin.cn/post/6973257605367988260 axios作为我们工作中常用ajax请求库,作为前端工程师我们当然是想一探究竟,axios究竟是如何去架构整个框架,中间拦截器...、适配器、 取消请求这些都是我们经常使用。...本篇主要是带你去梳理axios主要流程,并用es6重写简易版axios 拦截器 适配器 取消请求 拦截器 一个axios实例上有两个拦截器,一个是请求拦截器, 然后响应拦截器。...所以 我们用axios 自定义adapter 器时候, 一定是返回一个promise。ok请求方法我在下面模拟写出。 cancleToken 我首先问大家一个问题,取消请求原生浏览器是怎么做到?...可以取消请求。那么axios源码肯定也是运用了这一点去取消请求。现在浏览器其实也支持fetch请求fetch可以取消请求?很多同学说是不可以,其实不是

    64930
    领券