Javascript解析已按顺序填充的承诺数组中的第一个元素

Question

I'm doing multiple requests to different APIs (simulated by the delayedPromise function) which each take a certain amount of time to fulfill. If one of them fulfills I return the value it resolves and that's it. I'm currently doing those one after the other since the first request would be the most accurate while the second would be less accurate etc. So if the first request fails and the second fulfills I return the second

To speed things up I thought about parallelizing those requests. To accomplish that I'm creating an array that holds the promises and it awaits the result of the first element and if that fails it awaits the result of the second element etc...

Here's the code:

function promiseTest() {
    return new Promise(function (resolve, reject) {
        let promises = []
        new Promise(async function (resolve, reject) {
            promises.push(delayedPromise(true, 10000, "1")) //If true resolves after 10000 ms; false = reject
            promises.push(delayedPromise(false, 1000, "2"))
            promises.push(delayedPromise(false, 1000, "3"))
            let answer;
            let answer2
            let answer3;
            answer = await promises[0].catch(async err => {
                answer2 = await promises[1].catch(async err => {
                    answer3 = await promises[2].catch(err => { reject(err) })
                })
            })
            if (answer != undefined) {
                resolve(answer)
            }
            else if (answer2 != undefined) {
                resolve(answer2)
            }
            else if (answer3 != undefined) {
                resolve(answer3)
            }

        }).then(res => resolve(res)).catch(err => {reject(err)})

    })
}

function delayedPromise(bool, time,string ="") {
    return new Promise(function (resolve, reject) {
        if (bool) {
            setTimeout(resolve(string), time)
        }
        else {
            setTimeout(reject(), time)
        }
    })
}

The issue is that while this approach works it's

A: Most likely not the best solution and hardly scalable

and B: The exact code above is creating a bunch of uncaught exceptions errors. I believe this is when I receive a result for answer1 I'm not handling any of the rejections the other functions returned.

Is there any better way to do these kinds of things/ fix the above mentioned concerns? I'd appreciate any ideas or improvements! Many thanks in advance

PS: If you can phrase my title better please let me know I'm kind of struggling to convey my issue in one sentence

Answer 1

There is no builtin for this. Promise.any and Promise.allSettled are quite similar but do not do exactly what you want. You'll have to build it yourself indeed. This is what I would do:

async function first(iterable) {
    const promises = [];
    for (const thenable of iterable) {
        const promise = Promise.resolve(thenable);
        promises.push(promise);
        promise.catch(() => {}); // ignore rejections, we'll handle them later
    }
    const errors = [];
    for (const promise of promises) {
        try {
            return await promise;
        } catch(error) {
            errors.push(error);
        }
    }
    throw new AggregateError(errors);
}

Answer 2

Code in the question simplifies to:

function promiseTest() {
    let promises = [
        delayedPromise(true, 10000, '1'),
        delayedPromise(false, 1000, '2'),
        delayedPromise(false, 1000, '3')
    ];
    return promises[0]
    .catch(() => promises[1])
    .catch(() => promises[2]);
}

As soon as a successful promise is encountered, the chain will stop catching and the successful result will drop all the way through to be delivered (promise-wrpped) to promiseTest's caller.

The catch-chain could also be written as follows ...

Promise.reject()
.catch(() => promises[0])
.catch(() => promises[1])
.catch(() => promises[2]);

... which helps in formulating a proceduralized version for an array of any length, as follows:

function promiseTest() {
    let promises = [...]; // array of Promises (any length)
    return promises.reduce((p_, p) => p_.catch(() => p), Promise.reject());
}

Assuming that measures to avoid unhandled rejections are not taken in the formulation of the promises array, you can do so (with a series of "branch-catches") in the reduction ...

function promiseTest() {
    let promises = [...]; // array of Promises (any length).
    return promises.reduce((p_, p) => {
        p.catch(() => null); // avoid unhandled rejections.
        return p_.catch(() => p);
    }, Promise.reject());
}

Answer 3

I think weighting the result to favor promises in order while still running them all in parallel (for best end-to-end time) will require building a special loop. I think you can do it like this:

const errResult = Symbol('errResult');

// fns is an array of functions to call
// args is a array of arguments to pass to each function (same args to each)
async function getResult(fns, args) {
    // start all the async operations to run in parallel
    const promises = fns.map(fn => {
        // Rejections will resolve with a sentinel value so we can detect them
        // This helps us avoid ever getting an unhandled rejection error
        // on promises that reject after we've already found our desired value
        return fn(...args).catch(err => {
            return errResult;
        });
    });
    // now await them in order so you can find the first
    // one that completes (in order)
    // Promises that rejected have been converted into an errResult
    // resolve to help in avoiding unhandled rejections
    // after we return with our good first result
    for (let p of promises) {
        let result = await p;
        if (result !== errResult) {
            return result;
        }
    }
    throw new Error('no results');
}


// sample usage:
getResult([fn1, fn2, fn3, fn4], [argA,argB]).then(result => {
    console.log(result);
}).catch(err => {
    console.log("no results found");
});

If you want different args to each function, then just build that into fn1, fn2, etc... so they call the root function with their desired arguments and then let the args array be an empty array.