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 相关文章推荐
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
js实现3d悬浮效果
Feb 16 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
微信小程序实现图片上传
May 23 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python操作串口的方法
2015/06/17 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
基于Django实现日志记录报错信息
2019/12/17 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
工地资料员岗位职责
2013/12/31 职场文书
自我鉴定三原则
2014/01/13 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
村级换届选举方案
2014/05/10 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
语文教师求职信范文
2015/03/20 职场文书
刑事上诉状范文
2015/05/22 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
高一英语教学反思
2016/03/03 职场文书