Axios中请求成功了,却仍然被catch捕获

Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践) axios 用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新局部.1.为什么不使用 ajax 呢?官方:在 jQuery 中推荐使用 ajax 技术, Vue 里面不推荐使用 jQuery 框架,因此 Vue 更推荐使用 axiox 异步请求库(axios并不是 vue 官方库).2.axios 特性可以从浏览器中创建 XMLHttpRequests可以从 node.js 中创建 http 请求.支持 Promise API.支持拦截请求和响应.转换请求数据和响应数据. 阅读详情

在vue中做一个请求用户收藏的功能,请求成功发出且服务器也响应了状态码,但axios的返回仍然被catch捕获了,不能通过then得到返回数据。

通过查看Axios的官方文档的错误处理一节,

catch到的不一定是请求失败了,可以通过更多的输出查看错误信息。

编写一个获取用户收藏信息的函数:

function userFavorite (username,subject_type,type,limit,offset) {
  return axios.get('/v0/users/' + username+'/collections' , {
    username, //必需
    subject_type,
    type,
    limit,
    offset,
  })
}

在其他组件中引入该函数,然后调用,在catch中插入更多的log语句,反应报错

//获取用户收藏
userFavorite(username,2,3,30,0).then( res => {
      console.log(res.data[1].name_cn)
      for  (let item=0; item < Math.min(8, res.data.length); item++){
        userProfile.addFavorList(res.data[i].name_cn)
      }
    })
    .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起,但没有收到响应
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

这样可以查看具体的报错,由此得到我的错误是接口函数调用时res.data[i].name_cn取不到该值(undefined),详细查看浏览器的网络响应,把循环和调用中的都改为:res.data.data[item].subject.name_cn就成功了。

后端接口来源于Bangumi API

文章来源于我的个人博客:Axios中请求成功了,却仍然被catch捕获

RestFul API 详解 RESTful API 经常也被叫做 REST API,它是基于 REST 构建的 API。RESTful API 可以让你看到 URL+Http Method 就知道这个 URL 是干什么的,让你看到了 HTTP 状态码(status code)就知道请求结果如何。 阅读详情

相关推荐

告别Nginx原始日志!VictoriaLogs+Grafana构建企业级应用日志分析平台实战

描述:做为一个合格的运维工程师,在面对企业安全运维管理中,日志审计是一项非常重要的工作。授人以鱼不如授人以渔,各位运友们可参照作者的方案设计,在自己的项目中根据实际情况调整落地,例如,不在仅仅采集 NGINX 应用日志,而是采集 Apache、Tomcat、SpringBoot 等多种应用服务器的日志,又如,不再仅仅采集网络设备、安全审计审计日志,而是 Windows、Linux 等多种操作系统的审计日志等,大家可充分发挥想象、实践能力,也欢迎大家在知识星球中分享自己的方案设计,一起交流学习。

全栈工程师修炼指南-IT知识分享 2477

axios请求成功进入catch原因

使用axios进行请求,浏览器f12检查,请求成功。但是代码逻辑还是进入axios的catch模块,并且打印为undefined. 刚开始以为是then中业务异常抛出,后只放console.log也出错,排除。 原因分析:发现axios中 是有响应拦截器的 代码如下 axios.interceptors.response.use(function (response) { if(response.headers.token){ storage.setToke

zhuxiaobo09的专栏 4922

用面包板实测MOSFET:手把手教你测量跨导和开关时间

本文详细介绍了如何使用面包板、Arduino和示波器搭建测试平台,实测MOSFET的跨导和开关时间。通过分步测量流程和示波器技巧,帮助电子设计初学者深入理解MOSFET的动态特性,包括跨导计算、开关时间参数解析以及米勒平台现象分析。

beer8的博客 221

vue axios请求成功进入catch原因

START 仅以此文,纪念这个离谱的bug,o(╥﹏╥)o 问题 长话短说,使用axios进行请求,浏览器f12检查,请求成功。但是代码逻辑还是进入axios的catch模块。 原因 当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意:此时控制台并不会报错,因为错误被catch捕获了) axios是异步发起,若发起后页面刷新,那么就会丢失当前进程,导致接收不到。例如 form表单,点击按钮提交后,表单会刷新 特殊情况

lazy_tomato的博客 1万+

Hierarchical Flow Partition(Top-down&&Bottom-up)

hierarchy flow是将设计切分成多个block,分别处理单个block,然后完成后,将它们进行拼接以完成最终的chip。一般划分为三个阶段:chip planning;physical budget就是pin assignmenthierarchy flow实现的方法有两种,一种是top-down,另一种是bottom-up,无论是哪种,都是都要通过flatten的方法分别全局范围进行优化实现。

qq_39493558的博客 3072

科研党福音:如何用Zotero+Paper Agent打造你的AI论文速递系统(附详细配置教程)

本文为科研工作者提供了一套利用Zotero和开源工具Paper Agent构建自动化AI论文速递系统的详细教程。该系统能基于用户在Zotero中的文献库智能学习研究兴趣,每日自动从arXiv等平台筛选、下载并深度解读最相关的前沿论文,生成个性化日报,实现从被动接收到主动精准获取的知识工作流重塑。

kite3的博客 515

Axios请求成功和失败时分别执行哪个函数?

原理是当发起一个请求时,Axios 会返回一个 Promise 对象。这两个函数适用于处理异步请求的结果,并根据请求的成功或失败状态进行相应的处理。方法,用于注册请求成功和失败的回调函数。当请求成功时,会调用。在 Axios 中,请求成功和失败时分别执行的函数是。方法用于发起一个 GET 请求,请求的 URL 是。方法注册的回调函数;当请求失败时,会调用。方法注册的回调函数会被调用,并且可以通过。方法注册的回调函数会被调用,并且可以通过。获取到服务器返回的数据。方法注册的回调函数。参数获取到错误信息。

dxn16638400024的博客 2027

从数学到机床:RTCP背后的几何变换与工业实现

本文深入解析RTCP(Rotary Tool Center Point)技术在五轴数控加工中的核心作用,通过几何变换与运动学原理实现刀尖点跟随,确保加工精度。从数学基础到工业实现,详细探讨了算法架构、机床结构适配及精度保障方法,为数控系统开发和高效加工提供关键技术支撑。

jump7的博客 258

Axios使用

通过‘cancelToken’可以取消请求,这在处理用户主动取消操作或者请求超时时使用。拦截器允许在请求或响应被处理之前拦截它们,这对于处理身份验证,错误处理非常有用。可以通过设置默认配置,简化后续请求,比如设置请求的基础URL和超时时间。DELETE请求:用于删除数据。post请求:用于发送数据。PUT请求:用于更新数据。

qq_36197716的博客 636

手把手教你学Simulink--基于微电网的建模与仿真场景实例:独立运行模式下微电网的能量管理系统设计

本文详细介绍了使用Simulink对独立运行微电网能量管理系统进行建模与仿真的完整流程。主要包括:系统结构设计(分布式能源、储能系统、负荷等模块)、建模步骤(从创建项目到实现能量管理策略)、仿真设置与结果分析。通过建立基于规则的控制逻辑和优化调度算法,实现微电网的自主运行和能量优化管理。文章还提供了参数优化和多目标改进建议,为新能源和智能电网领域的研究与应用提供了实用指导。

MHD0815的博客 8583

ASP.NET Core 6 Web API在IIS上的部署与调试

通过以上步骤和配置,你应该能够成功部署并调试你的ASP.NET Core 6 Web API在IIS上。记住,权限和配置是关键,确保你的环境和应用程序代码都正确设置。希望这篇博客对你部署和解决IIS上的问题有所帮助。

m0_74337424的博客 522

2090715——axios中的数据返回

axios会通过.then .catch 当得到请求失败的时候,用.catch来捕获错误。 .then来进行正确的请求。 login({ username: this.ruleForm.username, password: this.ruleForm.password }).then((response) => { ...

寄蜉蝣于天地,渺沧海之一粟。 973

OPTEE:TA命令操作的实现(三)

上文我们创建好了通道,现在就是操作,怎么操作TA呢?REE侧的CA执行创建会话操作成功后,CA就可使用获取到的调用来让TA执行特定的命令。通过ioctl的系统调用发送到OP-TEE的驱动中,保存在共享内存中,并触发安全监控模式调用(smc)切换到Monitor模式(ARMv7)或EL3(ARMv8)中进行安全世界状态的处理。

叫好与叫座虽然不是对立面,但想在同一个作品中达到双重效果很难。 1268

vue——axios请求成功却进入catch的原因

问题 axios返回200状态码(即请求成功)却走进了catch里面 原因 当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意:此时控制台并不会报错,因为错误被catch捕获了) ...

yiyueqinghui的博客 5414

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

vue中的.then()与.catch()

catch中获取到的值是请求失败或者代码问题造成的错误,而因代码造成的错误在.then()中获取不到,因此我们常用catch我们偶尔会遇到一些问题:明明请求成功了,逻辑却进入catch中了,这时说明在then中的处理逻辑可能出现了错误,并不是请求失败才会进入catch。

MyHappinessIsU的博客 2万+

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

axios请求有数据但是还会报错

axios请求有数据但是还会报错 案例: 上图可见,虽然已经有了红色的返回数据,但是还是执行了.catch。 错误的地方 .then((res) =&gt; { console.log(res.data); deviceSNToImgPath = response.data; }) 可见response错了,没定义,这样的错误很少见。 .catch((err) =&gt; { ...

犹有傲霜枝的博客 3239

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

axios写api请求

我可以提供一些关于使用Axios来发送API请求的建议:1. 使用Axios的官方文档来了解如何使用它;2. 将API请求的参数放入Axios的config对象中;3. 使用Axios的then()方法来处理请求的响应;4. 如果有错误,请使用Axios的catch()方法来处理它们。 ...

weixin_35751412的博客 61

解决create-react-app结合dvajs使用axios请求发生异常时候,无法继续发送请求(请求发生阻塞)

解决create-react-app结合dvajs使用axios请求发生异常时候,无法继续发送请求(请求阻塞) 在使用create-react-app结合dvajs封装axios请求时候, 发现了一个bug: 当一次请求发生异常时候(如404或者500), 请求发生了阻塞, 也就是无法继续发送下一次请求 这是封装的请求的方法: const postRequest = (url, data) => axios.post(url, data) 如上图, 一次请求异常, 再次点击submit都不会发送请

wx1035589113的博客 685

Axios基本使用

1、Axios==>ajax异步请求技术 Axios是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 类似于页面局部更新技术Ajax 2、Axios网站 中文网站:http://axios-js.com/ 3、发送异步请求 1、get请求 // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .

weixin_45153932的博客 162

axios异步请求的两种写法

2、promise对象的.then .catch写法。1、async 、await写法。

choorn的博客 719

axios 什么时候走then 方法;如何捕捉错误的状态码

axios 什么时候走then 方法,源码在defaults.js文件中找到了答案 validateStatus: function validateStatus(status) { return status >= 200 && status < 300; } 也就是说在我们没有设置adapter的validateStatus方法的时候,status在200到300之间会调用then方法,或者准确点说叫resolve方法 如何捕捉错误的状态码 错误的状态码 axios

a393007511的博客 3108

Promise.all等待异步请求全部完成的简单实现(vue axios)

多个异步axios请求,Promise.all

weixin_44132462的博客 1661

vue基础---axios的使用

axios可以理解为ajaxi/osystem,是一个基于用于浏览器和nodejs的HTTP客户端,简单的理解就是ajax的封装。

weixin_52474888的博客 221

vue项目中 Uncaught (in promise) Error 解决

背景: 经过: 在 出现这个错误的时候,我起初一直总觉的是 请求接口的错误,或者数据请求报错!!! 当我看过之后并没有报错 ,其次又看控制台显示得报错Uncaught (in promise) Error在login页面得69 行,后来看了看并没错,于是乎,就百度了一下,看到错误还是报错,和我错误不匹配 于是,我就请教了一下,同事,强哥;它帮在login 页面逐一打印,res 值了什么得都有!!!

weixin_59519449的博客 7万+

promise 请求返回 对象_promise-async/await-axios

Promise对象代表了未来某个将要发生的事件(通常是一个异步操作),是ES6原生提供的。 在ES6以前实现异步操作主要是依靠回调函数,由于ajax请求时无法得知数据返回的具体时间,所以只能将callback回调传给ajax,待ajax请求完成时再执行回调函数。而promise接受一个函数做参数,该函数有 resolve方法和reject方法两个参数,若异步操作...

weixin_30015371的博客 1836

面试一脸懵:使用await async改造axios

//改造前: axios(url).then().catch().finally() //改造后: let data = function(){} let error= function(){} let end= function(){} try{ let ans = await axios(url) data() }catch(e){ error(e) } end()

Stavin Li的博客 585
上一篇: 全局配置Eslint实现Standard标准,以遍在各个Vue项目通用
下一篇: 使用vue制作简单的bangumi数据分析前端
空气力学先驱
博客等级 码龄6年 154粉丝 30原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值