Uncaught (In Promise) error while using setTimeout() to Reject a promise in JavaScript

huangapple
go评论97阅读模式
英文:

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.

  1. Uncaught (in promise) I hate you
  2. Promise.then (async)
  3. (anonymous)

Here is the code for your reference -

  1. const myPromise = new Promise(function(myResolve, reject) {
  2.   setTimeout(() => {
  3.     reject('I hate you');
  4.   }, 3000);
  5. });
  7. myPromise.then(function(value) {
  8.   document.getElementById("demo").innerHTML = value;
  9. });
  11. myPromise.catch(error => {
  12.   console.log("Catching it");
  13.   document.getElementById("demo").innerHTML = error;
  14. });
  1. <h2>JavaScript Promise</h2>
  2. <p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
  3. <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.

  1. Uncaught (in promise) I hate you
  2. Promise.then (async)		
  3. (anonymous)

Here is the code for your reference -

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const myPromise = new Promise(function(myResolve, reject) {
  2. setTimeout(() =&gt; {
  3.     reject(&#39;I hate you&#39;);
  4. }, 3000);
  5. });
  7. myPromise.then(function(value) {
  8.   document.getElementById(&quot;demo&quot;).innerHTML = value;
  9. });
  11. myPromise.catch( error =&gt; {
  12.     console.log(&quot;Catching it&quot;);
  13. 	document.getElementById(&quot;demo&quot;).innerHTML = error;
  14. });

<!-- language: lang-html -->

  1. &lt;h2&gt;JavaScript Promise&lt;/h2&gt;
  2. &lt;p&gt;Wait 3 seconds (3000 milliseconds) for this page to change.&lt;/p&gt;
  3. &lt;h1 id=&quot;demo&quot;&gt;&lt;/h1&gt;

<!-- end snippet -->

Please help me in finding out the error that I made.

答案1

得分: 0

这应该可以工作

  1. <html>
  2. <body>
  3.   <h2>JavaScript Promise</h2>
  4.   <p>等待3秒（3000毫秒）以更改此页面。</p>
  5.   <h1 id="demo"></h1>
  6.   <script>
  7.     const myPromise = new Promise(function (myResolve, reject) {
  8.       setTimeout(() => {
  9.         reject('我讨厌你');
  10.       }, 3000);
  11.     });
  13.     myPromise.then(function (value) {
  14.       document.getElementById("demo").innerHTML = value;
  15.     }).catch(error => {
  16.       console.log("捕获它");
  17.       document.getElementById("demo").innerHTML = error;
  18.     });
  19.   </script>
  20. </body>
  21. </html>
英文:

This should work

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;html&gt;
  3. &lt;body&gt;
  5.   &lt;h2&gt;JavaScript Promise&lt;/h2&gt;
  7.   &lt;p&gt;Wait 3 seconds (3000 milliseconds) for this page to change.&lt;/p&gt;
  9.   &lt;h1 id=&quot;demo&quot;&gt;&lt;/h1&gt;
  11.   &lt;script&gt;
  12.     const myPromise = new Promise(function(myResolve, reject) {
  13.       setTimeout(() =&gt; {
  14.         reject(&#39;I hate you&#39;);
  15.       }, 3000);
  16.     });
  18.     myPromise.then(function(value) {
  19.       document.getElementById(&quot;demo&quot;).innerHTML = value;
  20.     }).catch(error =&gt; {
  21.       console.log(&quot;Catching it&quot;);
  22.       document.getElementById(&quot;demo&quot;).innerHTML = error;
  23.     });
  24.   &lt;/script&gt;
  26. &lt;/body&gt;
  28. &lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

Here is the translated code:

  1. myPromise.then(function(value) {
  2.   document.getElementById("demo").innerHTML = value;
  3. }).catch( error => {
  4.     console.log("捕获错误");
  5.     document.getElementById("demo").innerHTML = error;
  6. });

Please note that the code you provided was already in JavaScript, so only the comments and string contents were translated into Chinese.

英文: 
  1. myPromise.then(function(value) {
  2.   document.getElementById(&quot;demo&quot;).innerHTML = value;
  3. }).catch( error =&gt; {
  4.     console.log(&quot;Catching it&quot;);
  5.     document.getElementById(&quot;demo&quot;).innerHTML = error;
  6. });

You need to catch the error after .then

答案3

得分: 0

感谢tlvi38在被接受的答案中的评论，我现在理解了我的查询，原始问题中由OP发布的未捕获问题可以通过为未连接的then添加单独的catch块来修复，如下所示：

  1. const myPromise = new Promise(function (myResolve, reject) {
  2.   setTimeout(() => {
  3.     reject("我讨厌你");
  4.   }, 500);
  5. });
  7. const newUncaughtPromise = myPromise.then(function (value) {
  8.   document.getElementById("demo").innerHTML = value;
  9. });
  11. myPromise.catch((error) => {
  12.   console.log("捕获它");
  13.   document.getElementById("demo").innerHTML = error;
  14. });
  16. newUncaughtPromise.catch((error) => {
  17.   console.log("捕获未捕获的错误");
  18.   document.getElementById("demo_uncaught").innerHTML = error;
  19. });

原始问题：
由于我不能添加评论，所以我将其写成答案，但我观察到除了被接受的答案之外，如果只有以下的catch块，也可以正常工作，没有任何问题。

  1. const myPromise = new Promise(function(myResolve, reject) {
  2.   setTimeout(() => {
  3.     reject('我讨厌你');
  4.   }, 3000);
  5. });
  6.   
  7. myPromise.catch( error => {
  8.   console.log("捕获它");
  9.   document.getElementById("demo").innerHTML = error;
  10. });

但是，将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:

  1. const myPromise = new Promise(function (myResolve, reject) {
  2.   setTimeout(() =&gt; {
  3.     reject(&quot;I hate you&quot;);
  4.   }, 500);
  5. });
  7. const newUncaughtPromise = myPromise.then(function (value) {
  8.   document.getElementById(&quot;demo&quot;).innerHTML = value;
  9. });
  11. myPromise.catch((error) =&gt; {
  12.   console.log(&quot;Catching it&quot;);
  13.   document.getElementById(&quot;demo&quot;).innerHTML = error;
  14. });
  16. newUncaughtPromise.catch((error) =&gt; {
  17.   console.log(&quot;Catching the uncaught it&quot;);
  18.   document.getElementById(&quot;demo_uncaught&quot;).innerHTML = error;
  19. });

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.

  1. const myPromise = new Promise(function(myResolve, reject) {
  2.   setTimeout(() =&gt; {
  3.     reject(&#39;I hate you&#39;);
  4.   }, 3000);
  5. });
  6.   
  7. myPromise.catch( error =&gt; {
  8.   console.log(&quot;Catching it&quot;);
  9.   document.getElementById(&quot;demo&quot;).innerHTML = error;
  10. });

But having both, then and catch not chained up, in any order gives Uncaught error.. in console. Can someone explain why is that?

huangapple
  • 本文由 发表于 2023年5月26日 14:13:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76338071.html
  • asynchronous
  • css
  • es6-promise
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定