我试图让一个简单的unhandledrejection处理程序在Google Chrome中运行。
如果我将以下代码粘贴到JSFiddle并在Chrome中运行,我会收到一个错误框,如预期的那样:
window.addEventListener('unhandledrejection', function(e) {
console.log(e);
alert(e.reason);
});
new Promise(function(resolve, reject) {
setTimeout(function() {
return reject('oh noes');
}, 2000);
});
如果我使用嵌入式脚本创建HTML文件并将其作为file:///
网址加载到Chrome中,我会按预期收到一个消息框。
<!doctype html>
<html>
<body>
<script type="text/javascript">
window.addEventListener('unhandledrejection', function(e) {
console.log(e);
alert(e.reason);
});
new Promise(function(resolve, reject) {
setTimeout(function() {
return reject('oh noes');
}, 2000);
});
</script>
</body>
</html>
如果我创建单独的HTML和JS文件并将其作为file:///
网址加载到Chrome中,我会获得Chrome的标准&#39; Uncaught(in promise)&#39;控制台错误,但没有消息框。
的index.html:
<!doctype html>
<html>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js:
window.addEventListener('unhandledrejection', function(e) {
console.log(e);
alert(e.reason);
});
new Promise(function(resolve, reject) {
setTimeout(function() {
return reject('oh noes');
}, 2000);
});
发生了什么?
答案 0 :(得分:9)
尽我所知,原因是如果“unhandledrejection”事件处理程序源自不同的脚本原点,则会被忽略。 (有关详细信息,请参阅same-origin policy上的MDN。)Chrome是very strict,特别是文件网址的安全来源,但我发现在不知情的情况下违反相同的原始政策也会因其他原因而发生(例如在开启Chrome Dev Tools的webpack-dev-server中进行开发。请参阅this Chrome issue进行讨论。
解决方法是在更简单,更接近生产的环境中进行测试:在纯HTTP服务器上运行(SimpleHTTPServer效果很好),必要时关闭Dev Tools。