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


Posted in Javascript onSeptember 08, 2020

问题:axios返回200状态码(即请求成功)却走进了catch里面

原因:

1.当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意:此时控制台并不会报错,因为错误被catch捕获了

2.axios是异步发起,若发起后页面刷新,那么就会丢失当前进程,导致接收不到。例如 form表单,点击按钮提交后,表单会刷新

补充知识:axios用catch的写法与不使用catch有什么区别?

官网上的写法:

axios.post(url, data)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
      console.log(error);
  })

公司项目的写法:

axios.post(url, data)
  .then(response => {
    console.log(response);
  }, error => {
    console.log(error);
  })

之前一直没有仔细研究过then和catch的写法,事实上,这个不是 axios catch 的相关 而是关于 new Promise() 的then

阮一峰在 promise 文档中有介绍。

一般来说,不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。

// bad
promise
 .then(function(data) {
  // success
 }, function(err) {
  // error
 });

// good
promise
 .then(function(data) { //cb
  // success
 })
 .catch(function(err) {
  // error
 });

上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch方法,而不使用then方法的第二个参数。

公司的写法无法catch第一个参数的异常。

这样写可能容易看懂一些:

axios.post(url, data)
  .then(response => {
    //处理逻辑
  }, error => {
    console.log('接口报错');
  })
  .catch(error=>{
    console.log('处理逻辑出错');
  })
axios.post(url, data)
  .then(response => {
    //处理逻辑
  })
  .catch(error=>{
    console.log('接口或处理逻辑出错');
  })

以上这篇vue axios请求成功却进入catch的原因分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
vue通过watch对input做字数限定的方法
Jul 13 Javascript
小程序实现发表评论功能
Jul 06 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
如何区分vue中的v-show 与 v-if
Sep 08 #Javascript
谈谈JavaScript中的函数
Sep 08 #Javascript
You might like
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php中opendir函数用法实例
2014/11/15 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
Python单例模式实例详解
2017/03/01 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python中的时区问题
2021/01/14 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
初中语文教学反思
2014/02/02 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
企业法律事务工作总结
2015/08/11 职场文书