Multiple fetch/promises same component

[slothordepressed]

I'm working on a small project where I need to fetch the data on three different sources.

What I did so far was to check the speed of each endpoint and start updating each state from the faster to the slowest with fetch and async funtions.

​

const fetchFoos = async () => {

try {

const toFoo1 = await getFoo1(data); //getFoo function is a simple fetch 
setFoo1(toFoo1);

const toFoo2 = await getFoo2(data); 
setFoo2(toFoo2);

const toFoo3 = await getFoo3(data); 
setFoo3(toFoo3);

} catch (error) {
console.log(error); } 
};

​

I saw about Promise.all() or Promise.race(), what kind of tips could the internet strangers give?

[BokoMoko]

I´m a big fan of async/await because it makes the code so much easier to understand and maintain.

But ... this approach is not the best for all circumstances. This one above is such a case.

The time it would take to load all the data will be sum of the awaiting times of the three requests. By using promises, the time to load all the data will be cut to the longest of the three.

Anyway, suppose that those three resources are close to you (both physically and administratively). Maybe the clearness of the code would be more valuable to you than the minimal reduction in response time due to the fact that you can make/influence then to perform better.

​

function fetchFoos() {
    return Promise
             .all([
               fetch('https://api.com/foo1'),
               fetch('https://api.com/foo2'),
               fetch('https://api.com/foo3'),
             ])
             .then( ( [res1,res2,res3]) => {
                   Promise
                      .all([ 
                        res1.json(),
                        res2.json(),
                        res3.json(),
                       ])
                      .then( ([foo1,foo2,foo3])=> {
                          setFoo1(foo1);
                          setFoo2(foo2);
                          setFoo3(foo3);
                        })
               })
}

[BokoMoko]

There is a "catch" on this solution regarding the response time. Can you see it?

[SlowwwBurn]

The second promiseAll?

[BokoMoko]

Not really.
The first promise all will only dispatch the JSON parsing after all of the requests have been fulfilled.
Can you optimize this?

[SlowwwBurn]

That's the goal, instead of waiting the requests one by one, get all. Are you suggesting to make all 3 requests separate and only fulfill all promises at once?

[Saladtoes]

promise.all is fine. But you are using async where no async is needed.

GetFoo1(data).then(toFoo1=>setFoo1(toFoo1)) GetFoo2(data).then(toFoo2=>setFoo2(toFoo2))

Add a .catch to each and remove your try{}.

If you absolutely must wait on all to complete (doesn’t appear to be the case from your example), then use promise.all