最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。
1. 调用接口的业务代码如下:

 // 业务代码调用
axios({
url: url,
method: 'post',
data: data
}).then(res => {
// 提示用户数据更新成功
// 问题:后端接口明明报了500错误,但代码确运行到了这里,导致前端界面提示更新成功
}).catch(err => {
// 提示用户更新失败
// 问题:本该运行到这里捕获错误,结果却并未捕获
})

很奇怪,代码未按预期的结果运行。

2. 检查下axios整体的配置

// 自己封装的用来过滤http错误的方法
function filter500(error, code, errMsg) {
// 界面提示代码略 return Promise.reject(new Error(error))
} // axios整体配置,对响应进行拦截
axios.interceptors.response.use(data => {
// ui效果代码略
return data
}, error => {
// ui效果代码略
const errMsg = error.toString()
const code = errMsg.substr(errMsg.indexOf('code') + 5) if (code === '401') {
filter401() // 注意这里并未返回
} else if (code === '500') {
filter500(error, code, errMsg) // 注意这里并未返回
} else {
return Promise.reject(new Error(error))
}
})

在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因,也就是当后端接口报了500错误时被axios拦截了但确并未返回一个promise,导致业务代码中未捕获此错误。所以记住:
**在每个promise链条中必须返回promise,否则调用结果可能和你预期不一样。**

这篇文章最初发表在我自己折腾的博客站点上:Promise使用时应注意的问题,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛。

Promise使用时应注意的问题的更多相关文章

  1. C++基础之引用与指针的区别与联系、常引用使用时应注意的问题

    什么是引用? 引用就是对变量起一个别名,而变量还是原来的变量,并没有重新定义一个变量.例如下面的例子:   #include<iostream> using namespace std; ...

  2. 【纯干货】SVN使用时应注意的那些事

    一.SVN使用步骤 检出 checkout 更新 update 冲突 confilicte 添加 Add (没有添加项目可不写) 填写svn日志 提交 commit你以为到这儿就结束了吗?....NO ...

  3. STL : List使用时应注意的问题

    这篇文章所述只是本人遇到的问题,仅供参考. #include<list> #include<iostream> using namespace std; class Foo { ...

  4. Toolbar 和 CollapsingToolbarLayout一起使用时menu item无点击反应解决办法

    昨天一直在琢磨为什么Toolbar和CollapsingToolbarLayout一起使用时menu item无点击放应的原因,后来在stackoverflow上一条回答,说可能是Toolbar的背景 ...

  5. Netty4.0.24.Final 版本中 IdleStateHandler 使用时的局限性

    使用Netty在客户端和服务端建立通讯通道,一般来说,一个连接可能很久没有访问,由于各种各样的网络问题导致连接已经失效,客户端再次发送请求时会产生连接异常. 基于这个原因,需要在客户端和服务端之间建立 ...

  6. 【WPF】当 ItemsSource 正在使用时操作无效。改用 ItemsControl.ItemsSource 访问和修改元素

    问题: 中文版报错:Additional information: 当 ItemsSource 正在使用时操作无效.改用 ItemsControl.ItemsSource 访问和修改元素. 英文版报错 ...

  7. Cookie使用时需要注意个数及大小限制

    各浏览器对Cookie有一定的限制,在使用时需要格外注意. 各浏览器之间对cookie的不同限制:   IE6.0 IE7.0/8.0/9.0+ Opera FF Safari Chrome cook ...

  8. EntityFrameWork 使用时碰到的小问题

    EntityFrameWork 使用时碰到的小问题 1,在使用orm访问数据库的相目里,也要引用EntityFrameWork.dll,否则无法使用orm 否则,编译错误 错误 5 "Sys ...

  9. MySQL 安装和启动服务,“本地计算机 上的 MySQL 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。”

    MySQL 安装和启动服务,以及遇到的问题 MySQL版本: mysql-5.7.13-winx64.zip (免安装,解压放到程序文件夹即可,比如 C:\Program Files\mysql-5. ...

随机推荐

  1. python之socketserver ftp功能简单讲解

    TCP协议中的socket一次只能和一个客户端通信,然而socketserver可以实现和多个客户端通信. 它是在socket的基础上进行了一层封装,底层还是调用的socket # 服务端 impor ...

  2. IDEA项目搭建十一——添加拦截器、忽略URL大小写、启动事件

    程序启动时如果需要添加某些初始化代码可以使用以下事件处理 import org.springframework.context.ApplicationEvent; import org.springf ...

  3. js调用android本地java代码

    js调用android本地java代码 当在Android上使用WebView控件开发一个Web应用时,可以创建一个通过Javascript调用Android端java代码的接口.也就是可以通过Jav ...

  4. Android事件总线(二)EventBus3.0源码解析

    1.构造函数 当我们要调用EventBus的功能时,比如注册或者发送事件,总会调用EventBus.getDefault()来获取EventBus实例: public static EventBus ...

  5. Ubuntu切换root身份,命令行以中文显示

    很多VPS商给的默认用户名并不是root,用以下命令处理即可: 1.修改root密码 sudo passwd root 输入密码,回车,再确认一次即可 2.更改密码后切换root身份 su root ...

  6. 记录定时任务的一个错误:crontab 中使用"%"的问题

    最近工作需要,需要定时执行命令文件,并且把执行的日志重定向输出到以日期命名的文件中,命令如下: /bin/bash /data/shell/merge.sh &>> /data/s ...

  7. Java:【面向对象:抽象类,接口】

    本文内容: 抽象类 接口 抽象类与接口的异同 首发日期:2018-03-24 抽象类: 虽然已经有了父类,但有时候父类也是无法直接描述某些共有属性的,比如哺乳类和人类都会叫,而一般来说哺乳类这个父类并 ...

  8. EntityFramework Code-First 简易教程(五)-------领域类配置

    前言:在前篇中,总是把领域类(Domain Class)翻译成模型类,因为我的理解它就是一个现实对象的抽象模型,不知道对不对.以防止将来可能的歧义,这篇开始还是直接对Domain Class直译. 前 ...

  9. 描述性统计的matlab实现

    理论讲的再多不会做也白弄 直接上手 一.针对接近正态分布的(均值,方差,标准差,极差,变异系数,偏度,峰度) 这里我必须提前说明一点就是,你在写好函数后,函数的名是dts,你保存的文件名也必须是dts ...

  10. [Compression] Hadoop 压缩

    0. 说明 Hadoop 压缩介绍 && 压缩格式总结 && 压缩编解码器测试 1. 介绍 [文件压缩的好处] 文件压缩的好处如下: 减少存储文件所需要的磁盘空间 加速 ...