2

Promises which resolve() or reject() can be handled in order with .then() regardless if they are resolved or rejected:

const getRecordById = (id) => {
    return new Promise((resolve, reject) => {
        const randNum = Math.floor(Math.random() * 2) + 1;
        if (randNum === 1) {
            resolve({ id, firstName: 'John', lastName: 'Doe' });
        } else {
            reject(`user id ${id} not found`);
        }
    });
};

for (let id = 1; id <= 10; id++) {
    getRecordById(id)
        .then(
            (record) => { console.log(`you got record #${record.id}`); },
            (errMessage) => { console.log(`error was: ${errMessage}`); }
        );
}

enter image description here

But I read in articles like this one that e.g.

many libraries and frameworks assume that promises are always rejected with an error

and so one should instead reject with an error like this: reject(new Error('Oops!')); instead of rejecting with a string.

But when I reject with an Error object, why do all the rejections complete after the resolves?

const getRecordById = (id) => {
    return new Promise((resolve, reject) => {
        const randNum = Math.floor(Math.random() * 2) + 1;
        if (randNum === 1) {
            resolve({ id, firstName: 'John', lastName: 'Doe' }); 
        } else {
            reject (new Error(`user id ${id} not found`)); 
        }
    });
};

for (let id = 1; id <= 10; id++) {
    getRecordById(id)
        .then((record) => { console.log(`you got record #${record.id}`); })
        .catch((errMessage) => { console.log(`error was: ${errMessage}`); });
}

enter image description here

Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
  • 1
    I found article that [explains](https://www.freecodecamp.org/news/the-real-difference-between-catch-vs-onrejected-15cab8978e92/) difference between `.catch` and `onRejected` callbacks. It's about how runtime queues tasks, if I understand it correctly. – capchuck Aug 27 '21 at 08:29
  • 1
    I think you want https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled – shun10114 Aug 27 '21 at 08:34
  • 1
    The type of the returned "cause" as nothing to do with that behavior, in both case you are not handling the rejection the same way, one handles it directly from the initial Promise while the other one handles the error from the Promise returned by `.then()`. That's at least one microtask later. – Kaiido Aug 27 '21 at 08:59
  • Possible duplicate of https://stackoverflow.com/questions/24662289/when-is-thensuccess-fail-considered-an-antipattern-for-promises (Though I'm not sure how well it explains the timing issue, but I don't have time to dig a better dupe target, so won't hammer this for now) – Kaiido Aug 27 '21 at 09:08
  • You still can use `.then(…, …)` instead of `.then(…).catch(…)` when you reject with an error not with a string. – Bergi Aug 27 '21 at 09:34
  • I think [capchuck](https://stackoverflow.com/users/16752963/capchuck) is right here is some more details about [fullfilled](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) – giveerr Aug 27 '21 at 09:43
  • You changed _two things_, you're asking about the one that _didn't_ cause the different behaviour. – jonrsharpe Aug 27 '21 at 09:46

1 Answers1

1

In the second example the errors are shown at the bottom is not because reject was an error object. In the first code you have handled error inside .then but in the second code snippet there is .catch for handling exception. Second code will log in same order as first if you handle error inside .then.

const getRecordById = (id) => {
    return new Promise((resolve, reject) => {
        const randNum = Math.floor(Math.random() * 2) + 1;
        if (randNum === 1) {
            resolve({ id, firstName: 'John', lastName: 'Doe' }); 
        } else {
            reject (new Error(`user id ${id} not found`)); 
        }
    });
};

for (let id = 1; id <= 10; id++) {
    getRecordById(id)
        .then((record) => { console.log(`you got record #${record.id}`)},
            (errMessage) => { console.log(`error was: ${errMessage}`); })
}
0x4e
  • 96
  • 1
  • 7