Why does my custom Promise.race implementation favor resolved inputs? - promise

Question

The custom implementation below of Promise.race is working correctly when I pass a Promise object to it. However, if I pass Promise.reject it sort of dismisses it and just resolves to the Promise.resolve value.
function race(promises) {
return new Promise((resolve, reject) => {
function resolveCB(value) {
resolve(value);
}
function rejectCB(value) {
reject(value);
}
promises.forEach((p) => {
p.then(resolveCB).catch(rejectCB);
});
});
}
const p1 = Promise.reject(1)
const p2 = Promise.reject(5)
const p3 = Promise.resolve(2)
race([p1, p2, p3]).then(result => console.log(result)).catch(err => console.log(err));
The above code logs 2. I would expect it to log 1.
const p1 = new Promise((resolve, reject) => {
setTimeout(() => reject(1), 1500);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve(6), 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => reject(8), 500);
});
This logs 8 as expected, so the issue is not in the function race it seems but in the misunderstanding of Promise.reject I guess?

Answer 1

If you switch the order of then and catch in your forEach, you can see the results you're expecting. The then takes up the space in the microtask queue even though the Promise rejection and lack of a catch handler means it doesn't actually transform the promise.
promises.forEach((p) => {
// This demonstrates how the results are sensitive to the order, but
// creates the opposite ordering: rejected promises are favored
// over resolved ones.
p.catch(rejectCB).then(resolveCB);
});
function race(promises) {
return new Promise((resolve, reject) => {
function resolveCB(value) {
resolve(value);
}
function rejectCB(value) {
reject(value);
}
promises.forEach((p) => {
p.catch(rejectCB).then(resolveCB);
});
});
}
const p1 = Promise.reject(1)
const p2 = Promise.reject(5)
const p3 = Promise.resolve(2)
race([p1, p2, p3]).then(result => console.log(result)).catch(err => console.log(err));
It'd be better, though, just to use the normal two-arg behavior of then so both of those outcomes happen at the same time:
promises.forEach((p) => {
p.then(resolveCB, rejectCB);
});
function race(promises) {
return new Promise((resolve, reject) => {
function resolveCB(value) {
resolve(value);
}
function rejectCB(value) {
reject(value);
}
promises.forEach((p) => {
p.then(resolveCB, rejectCB);
});
});
}
const p1 = Promise.reject(1)
const p2 = Promise.reject(5)
const p3 = Promise.resolve(2)
race([p1, p2, p3]).then(result => console.log(result)).catch(err => console.log(err));
(Outside of a toy or homework problem, you should be using the built-in race or a common polyfill. FWIW, the core-js polyfill uses the two-arg then.)