Question 177006 in Html Question posted in
Some basic documentation can be found here.

Is there an Uncaught 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.

Tags:

3

Answers


  1. 0

    This should work

    <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>
    Login or Signup to reply.
  2. 0 
    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

    Login or Signup to reply.
  3. 0

    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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search