英文:
Uncaught (In Promise) error while using setTimeout() to Reject a promise in JavaScript
问题
I am learning promises in javascript and I decided to implement a simple promise where I would set a timeout of 3 seconds and then reject the promise. Upon rejecting it, I am catching the error and displaying it in an HTML element. The promise works perfectly and displays the message, but I get the following error in the console.
Uncaught (in promise) I hate you
Promise.then (async)
(anonymous)
Here is the code for your reference -
const myPromise = new Promise(function(myResolve, reject) {
setTimeout(() => {
reject('I hate you');
}, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
myPromise.catch(error => {
console.log("Catching it");
document.getElementById("demo").innerHTML = error;
});
<h2>JavaScript Promise</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
Please help me in finding out the error that I made.
英文:
I am learning promises in javascript and I decided to implement a simple promise where I would set a timeout of 3 seconds and then reject the promise. Upon rejecting it, I am catching the error and displaying it in an HTML element. The promise works perfectly and displays the message, but I get the following error in the console.
Uncaught (in promise) I hate you
Promise.then (async)
(anonymous)
Here is the code for your reference -
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const myPromise = new Promise(function(myResolve, reject) {
setTimeout(() => {
reject('I hate you');
}, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
myPromise.catch( error => {
console.log("Catching it");
document.getElementById("demo").innerHTML = error;
});
<!-- language: lang-html -->
<h2>JavaScript Promise</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<!-- end snippet -->
Please help me in finding out the error that I made.
答案1
得分: 0
这应该可以工作
<html>
<body>
<h2>JavaScript Promise</h2>
<p>等待3秒（3000毫秒）以更改此页面。</p>
<h1 id="demo"></h1>
<script>
const myPromise = new Promise(function (myResolve, reject) {
setTimeout(() => {
reject('我讨厌你');
}, 3000);
});
myPromise.then(function (value) {
document.getElementById("demo").innerHTML = value;
}).catch(error => {
console.log("捕获它");
document.getElementById("demo").innerHTML = error;
});
</script>
</body>
</html>
英文:
This should work
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<body>
<h2>JavaScript Promise</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
const myPromise = new Promise(function(myResolve, reject) {
setTimeout(() => {
reject('I hate you');
}, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
}).catch(error => {
console.log("Catching it");
document.getElementById("demo").innerHTML = error;
});
</script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
Here is the translated code:
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
}).catch( error => {
console.log("捕获错误");
document.getElementById("demo").innerHTML = error;
});
Please note that the code you provided was already in JavaScript, so only the comments and string contents were translated into Chinese.
英文:
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
}).catch( error => {
console.log("Catching it");
document.getElementById("demo").innerHTML = error;
});
You need to catch the error after .then
答案3
得分: 0
感谢tlvi38在被接受的答案中的评论，我现在理解了我的查询，原始问题中由OP发布的未捕获问题可以通过为未连接的then添加单独的catch块来修复，如下所示：
const myPromise = new Promise(function (myResolve, reject) {
setTimeout(() => {
reject("我讨厌你");
}, 500);
});
const newUncaughtPromise = myPromise.then(function (value) {
document.getElementById("demo").innerHTML = value;
});
myPromise.catch((error) => {
console.log("捕获它");
document.getElementById("demo").innerHTML = error;
});
newUncaughtPromise.catch((error) => {
console.log("捕获未捕获的错误");
document.getElementById("demo_uncaught").innerHTML = error;
});
原始问题：
由于我不能添加评论，所以我将其写成答案，但我观察到除了被接受的答案之外，如果只有以下的catch块，也可以正常工作，没有任何问题。
const myPromise = new Promise(function(myResolve, reject) {
setTimeout(() => {
reject('我讨厌你');
}, 3000);
});
myPromise.catch( error => {
console.log("捕获它");
document.getElementById("demo").innerHTML = error;
});
但是，将then和catch两者都未连接，并且以任何顺序排列，会在控制台中显示未捕获的错误。有人能解释为什么会这样吗？
英文:
UPDATE
Thanks to the comment by tlvi38 on the accepted answer, I understand my query now, and the uncaught issue from the original question posted by the OP can be fixed by adding a separate catch block for the new promise returned by the unchained then as following:
const myPromise = new Promise(function (myResolve, reject) {
setTimeout(() => {
reject("I hate you");
}, 500);
});
const newUncaughtPromise = myPromise.then(function (value) {
document.getElementById("demo").innerHTML = value;
});
myPromise.catch((error) => {
console.log("Catching it");
document.getElementById("demo").innerHTML = error;
});
newUncaughtPromise.catch((error) => {
console.log("Catching the uncaught it");
document.getElementById("demo_uncaught").innerHTML = error;
});
ORIGINAL
Since I cannot add a comment, I am writing this as an answer, but I observed that other than the accepted answer, if you have just the catch block like following, it also works without any issue.
const myPromise = new Promise(function(myResolve, reject) {
setTimeout(() => {
reject('I hate you');
}, 3000);
});
myPromise.catch( error => {
console.log("Catching it");
document.getElementById("demo").innerHTML = error;
});
But having both, then and catch not chained up, in any order gives Uncaught error.. in console. Can someone explain why is that?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论