关于 promise 吃到错误的理解

下面的内容需要对浏览器原生支持的 promise 的基本用法有了解,如果你还不知道 promise 和 promise 的 catch 方法,你可能需要先在 这里 了解一下。

在 阮一峰大神的 《ECMAScript 6 入门》 关于 Promise 对象那一章在介绍 Promise.prototype.catch() 方法时,里面有一句描述是这样写的 :

跟传统的try/catch代码块不同的是,如果没有使用catch方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。

一开始我 错误的理解 了这句话的意思,认为是在 promise 内部如果发生错误的话,可以使用 catch 方法来捕获错误,但是如果不使用 catch 方法,它会静悄悄的,不会有报错,就像加了 try-catch 但是在 catch 里面不进行任何处理。

然后我做了一些测试发现和我想的不一样:

首先,试一下在 promise 里面抛出一个异常,看看能不能通过 catch 捕获到

var promise = new Promise(function(resolve, reject) {
throw new Error('test'); // 这里抛了一个异常
});
promise
.then(function(value) { console.log(value) })
.catch((err) => console.log('promise catch err')) // 控制台输出:
// promise catch err

没什么问题,catch 方法成功捕获到异常了,但是这个异常会不会再被抛到外面去呢?为了以防万一,我们在window 对象上加个 onerror 事件监测一下看看

window.onerror = function () {
console.log('window err')
} var promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise
.then(function(value) { console.log(value) })
.catch((err) => console.log('promise catch err')) // 控制台输出:
// promise catch err

结果还是一样,说明 catch 方法成功捕获到异常而且没有继续往外面抛,这和书里说的一样

那如果去掉 catch 方法呢?我们继续往下看

var promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.then(function(value) { console.log(value) }) // 这里不捕获异常了 // 控制台输出:
// Uncaught (in promise) Error: test

这里控制台输出了一个报错:Uncaught (in promise) Error: test,咦,如果像书里说的:

跟传统的try/catch代码块不同的是,如果没有使用catch方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。

上面说不会有任何反应,那怎么控制台还会报错呢?

我们可以猜测一下,其实这里有点像使用 try-catch 那样捕获了异常然后打印出错误信息后就不再做其他处理一样:

try{
console.log(x)
}catch(err){
console.error(err)
}

然后我们加一个 window.onerror 发现,这时 promise 外面添加错误监听事件不会捕获到 promise 对象里面没有进行捕获的错误,像下面这样:

window.onerror = function () {   // 我们添加了 window 的 onerror 处理函数
console.log('window err')
} promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.then(function(value) { console.log(value) }) // 控制台输出:
// Uncaught (in promise) Error: test

可以看到 window 的错误处理事件并没有被触发,所以报错应该是 promise 内部捕获处理的时候直接打印的而没有被抛出,也就验证了我们上面的猜测。

所以到这里,我们可以把书上那句话重新翻译一下得到一条结论

promise 对象里面同步代码抛出的错误在没有通过 promise 的 catch 方法捕获时是会打印报错的(不会阻止 promise 外面代码的执行),但是不会传递到外面触发其他错误监听函数(比如 window.onerror 、try-catch 等)


书上还讲到一个东西也挺奇怪的

window.onerror = function () {
console.log('window err')
} var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
throw new Error('test')
}, 0) resolve('ok');
});
promise
.then(function (value) { console.log(value) })
.catch(() => console.log('promise catch err'))

根据我们上面的理解,你觉得这个控制台会显示什么东西呢?

如果你对答案是 promise catch err,那你就错了,他的结果是:

// 控制台输出:
// ok
// window err
// Uncaught Error: test

这里由于是在 setTimeout 里面抛出错误的,所以报错会在同步代码执行完后的下一轮 “事件循环” 里执行,也就是说当 setTimeout 里面的函数执行后报错时,promise 已经执行完了(所以就算 resolve('ok') 写在 setTimeout 下面也是先输出 ok),所以这个错误是在 Promise 函数体外抛出的,当然也就不会被 promise 的 catch 方法捕获,所以就会传到 window 上被捕获并输出 window err,然后再被浏览器捕获输出Uncaught Error: test,如果在 window onerror 处理程序里面 return true,就不会看到浏览器捕获输出的 Uncaught Error: test 报错。

再看一下 下面的两个例子:

这里是在 promise 里面同步执行了 throw Error 和 resolve 两个操作

window.onerror = function () {
console.log('window err');
} var promise = new Promise(function (resolve, reject) {
throw new Error('test');
resolve('ok');
});
promise.then(function (value) { console.log(value) })
.catch(() => console.log('promise catch err')) // 控制台输出:
// promise catch err

这里是在 promise 里面用 setTimeout 异步执行了 throw Error 和 resolve 两个操作

window.onerror = function () {
console.log('window err');
} var promise = new Promise(function (resolve, reject) {
setTimeout(function () { // 这里包了一个 setTimeout
throw new Error('test');
resolve('ok');
}, 0)
});
promise.then(function (value) { console.log(value) })
.catch(() => console.log('promise catch err')) // 控制台输出:
//window err
//Uncaught Error: test

可以看到第二个例子中就算 promise 的状态还是 pedding ,异步操作里面的报错也不会被 promise 的 catch 方法捕获

所以这里又可以得到一条结论

Promise.prototype.catch() 方法对错误处理和捕获的规则只对 promise 里面的同步执行代码有效,如果此时 promise 里面有异步操作出错的话,是不受 promise 这些规则限制的,而是像正常的报错一样处理。

总结:

  1. promise 对象里面同步代码抛出的错误在没有通过 promise 的 catch 方法捕获时是会打印报错的(不会阻止 promise 外面代码的执行),但是不会传递到外面触发其他错误监听函数(比如 window.onerror 、try-catch 等)
  2. Promise.prototype.catch() 方法对错误处理和捕获的规则只对 promise 里面的同步执行代码有效,如果此时 promise 里面有异步操作出错的话,是不受 promise 这些规则限制的,而是像正常的报错一样处理。
  3. 其实上面两条规则可以看出 promise 对错误的处理应该是在内部使用了像 try-catch 的方式处理了错误,所以异步的它是处理不了的。就行下面这样一样,try-catch 并不会捕获到错误,错误会被 window.onerror 捕获
window.onerror = function () {
console.log('window err');
return true
} try{
setTimeout(function () {
console.log(x) // 这里 x 未定义
}, 10)
}catch(err){
console.log('try err')
} // 控制台输出:
//window err

最后,可能还会有一些理解上的错误,希望大家多多指正。

关于 promise 吃到错误的理解的更多相关文章

  1. 错误的理解引起的bug async await 执行顺序

    今天有幸好碰到一个bug,让我知道了之前我对await async 的理解有点偏差. 错误的理解 之前我一直以为  await 后面的表达式,如果是直接返回一个具体的值就不会等待,而是继续执行asyn ...

  2. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

  3. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  4. Uncaught (in promise) TypeError:的错误

    1.错误 创建一个vue实例,在data定义一些变量,如activityTime. 在methods里面用了axios发送请求. 在then的回调里使用this.activityTime 报错! 2. ...

  5. 关于EINTR错误的理解【转】

    转自:http://www.xuebuyuan.com/1470645.html 最近在工作中遇到了EINTR错误,感到比较困惑,几番研究之后,颇有心得和收获,特记录如下,便于以后查询,也给有同样困惑 ...

  6. Java中的static(1)【持续更新】——关于Eclipse的No enclosing instance of type ... 错误的理解和改正

    No enclosing instance of type SomeClass is accessible. Must qualify the allocation with an enclosing ...

  7. 对express中引入文件时提示Error: Cannot find module错误的理解

    打算写个小demo,在引入一个routes文件时,一直提示Error: Cannot find module('./routes')的错误,经过一番了解. 如果要把整个文件夹下所有的模块都引进来  v ...

  8. OpenStack学习系列-----第二篇 由一个错误看理解整个架构的重要性

    看了openstack没几天,然后就开始试着用Java调用所有的API,第一步得到Credentials的时候成功了,然后第二步,传参数使所有的server信息都列出来的时候报错404.具体描述如下( ...

  9. Promise里捕捉错误的最佳实践

    Promise里的同步部分不需要try catch new Promise((resolve, reject) => { throw new Error('error'); setTimeout ...

随机推荐

  1. SCU 4438 Censor KMP/Hash

    题意:给定一个模式串和文本,要求删除所有模式串.可能删除后会形成新的模式串,必须全部删除. 思路1:kmp算法求得失配数组,用一个match数组记录文本串中第i字符和未删除的字符能匹配模式串的长度.这 ...

  2. CodeForces - 796C Bank Hacking

    思路:共有n-1条边连接n个点,即形成一棵树.一开始需要选择一个点hack--将这个点视为根结点,与它相邻的点防御值加1,与它相隔一个在线点的点的防御也加1.当根节点被hack,即这个点被删除,又变成 ...

  3. 快了快了,你的 MacBook Pro 和 FineUICore!

    着玻璃窗,看到星巴克里那帮人拿着MacBook喝咖啡,你是不是要默念一遍:这帮傻叉,就爱装逼! 不过话说回来,你想不想尝试下这个傻叉的感觉? 是时候了,给自己一个理由,拥有自己的 MacBook Pr ...

  4. 转:客户端session与服务端session

    会话(Session)跟踪是Web程序中常用的技术,用来 跟踪用户的整个会话 .常用的会话跟踪技术是Cookie与Session. Cookie通过在客户端记录信息确定用户身份 , Session通过 ...

  5. linux周期性计划任务 进程管理

    周期性计划任务crontab命令系统服务:/etc/init.d/crond(crond必须启动才会生效)用户计划:/var/spool/cron/用户名默认的计划任务全局配置:/etc/cronta ...

  6. 关于我上传的activiti自定义流程demo的说明

    最近又收到了一些询问activiti的问题,其中好几个都是向我索要我上传的这个activiti自定义流程demo的数据库设计. 索要的多了,而我早就把这个库给删掉了,所以我便觉得有必要做一个说明: 我 ...

  7. Hybrid APP 架构设计思路

    关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue 通讯 作 ...

  8. freemarker写select组件(四)

    freemarker写select组件 1.宏定义 <#macro select id datas value="" key="" text=" ...

  9. E: 未发现软件包 install_flash_player_11_linux.x86_64.tar.gz

    1 错误描述 youhaidong@youhaidong:~$ sudo apt-get install install_flash_player_11_linux.x86_64.tar.gz 正在读 ...

  10. E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)

    1 错误描述 youhaidong@youhaidong:~$ sudo apt-get update E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂 ...