What does Uncaught (in promise) mean?

Question

I'm trying to learn what Promise is, so I started following this guide.

I copied this code from the guide and tried it in my developer console:

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (false) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

I get an error saying Uncaught (in promise) Error: It broke. I don't understand what this means. Can anyone explain?

Answer 1

A promise can be resolve or rejected. If it's if/when it's resolved any then functions will be called. If it's rejected any catch functions will be called. If you don't provide any catch functions then promise might helpfully print that warning.

function test(fail) {
  return new Promise((resolve, reject) => {
    if (fail) {
      reject();
    } else {
      resolve();
    }
  });
}

// will print rejected 1
test(true)
  .then(() => { console.log('resolved 1'); })
  .catch(() => { console.log('rejected 1'); })

// might generate the error telling you the promise
// was rejected but you didn't provide a catch function
test(true)
  .then(() => { console.log('resolved 2'); })

Note that message is a helpful warning by the browser/JavaScript engine. You don't have to catch rejected promises but usually you want to so the message is helpful.

details

It's important to note how promises work. When you call then(someFunc) they effectively put someFunc on a list of functions to be called later. If the promise is already fulfilled they'll call every function on the list and clear the list. If the promise is not fulfilled they'll do nothing until it is. The same for catch except it's a different list.

Here's an example

function makePromiseParts() {
  let resolve;
  let reject;
  const promise = new Promise((_resolve, _reject) => {
    log('--in promise--');
    resolve = _resolve;
    reject = _reject;
  });
  return {
    promise,
    resolve,
    reject,
  };
}

function wait() {
  return new Promise(resolve => setTimeout(resolve));
}

async function main() {
  {
    log('--start--');
    
    const p = makePromiseParts();
    
    log('--after make promise--');

    p.promise.then(() => { log('then 1'); });
    p.promise.then(() => { log('then 2'); });

    log('--before resolve--');

    p.resolve();

    log('--after resolve--');
    
    await wait();

    log('--after waiting--');

    p.promise.then(() => { log('then 3'); });
    p.promise.then(() => { log('then 4'); });

    log('--before waiting--');
    
    await wait();

    log('--end--');
  }
  
  await wait();
  log(' ');

  {
    log('--start--');
  
    const p = makePromiseParts();

    log('--after make promise--');

    p.promise.catch(() => { log('catch 1'); });
    p.promise.catch(() => { log('catch 2'); });

    log('--before reject--');

    p.reject();

    log('--after reject--');
    
    await wait();

    log('--after waiting--');

    p.promise.catch(() => { log('catch 3'); });
    p.promise.catch(() => { log('catch 4'); });

    log('--before waiting--');
    
    await wait();

    log('--end--');
  }

}
main();

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

pre { margin: 0; }

To put it another way, then takes a function that says call this function if and when you're resolved and catch takes a function that says call this function if and when you're rejected.

Answer 2

It means your Promise threw an error that was not caught.

i.e. you did not call .catch() on your promise.

In your case, if(false) will never evaluate to truthy, so your promise gets rejected.