Using Promise.all to resolve fetch requests

Question

I have an array of 4 request objects that I want to use the Fetch API on and get back promises. I then want to resolve each of these promises and get the values back.

Here is how I am building the request objects.

let requestsArray = urlArray.map((url) => {
        let request = new Request(url, {
            headers: new Headers({
                'Content-Type': 'text/json'
            }), 
            method: 'GET'
        });

        return request;
    });

And here is how I am trying to use Promise.all()

Promise.all(requestsArray.map((request) => {
        return fetch(request).then((response) => {
            return response.json();
        }).then((data) => {
            return data;
        });
    })).then((values) => {
        console.log(values);
    });

The last console.log(values) doesn't print anything to the console. Am I using Promise.all() wrong?

I know the first request goes through, and when I run each request individually, it works fine. The only issue is when I try to run them concurrently.

you dont have any `catch` defined at all.. are you sure there are no errors? — Suraj Rao, Jul 29 '17 at 13:16
Does this answer your question? [How can I fetch an array of URLs with Promise.all?](https://stackoverflow.com/questions/31710768/how-can-i-fetch-an-array-of-urls-with-promise-all) — Henke, May 20 '21 at 09:51

score 7 · Accepted Answer · answered Jul 29 '17 at 13:21

7

I can't see any problems, for me it returns just fine: https://jsfiddle.net/np5bx03j/ However, this is a test with jsfiddles /echo/json URLs and not your original ones. I therefore would assume some error occured in your case. I suggest adding a catch to log errors:

Promise.all(requestsArray.map((request) => {
    return fetch(request).then((response) => {
        return response.json();
    }).then((data) => {
        return data;
    });
})).then((values) => {
    console.log('values', values);
}).catch(console.error.bind(console));

EDIT: Just for the sake of completeness: I can't see any problems according to the API (MDN) or anything else either.

answered Jul 29 '17 at 13:21

SVSchmidt

6,269
2
26
37

Yeah, I tried the `catch` error handling. No error pops up. And when I look at my network tab, it just says that the requests are pending, except the first one. – random_coder_101 Jul 29 '17 at 13:58
3

@ZaidHumayun But then the behavior is correct. According to MDN, Promise.all resolves "when all the promises in the given iterable have resolved, or if any of the promises reject". In your case, since there are pending requests, they did not resolve/reject. You should check why they're taking that long (must be a network problem, nothing with Promises). – SVSchmidt Jul 29 '17 at 14:03
Yeah, you were right. It was a problem with the way the promise was being returned on the server. Should I accept your answer as the accepted answer in that case? I'm confused about how to resolve this question right now. – random_coder_101 Jul 29 '17 at 14:05
@ZaidHumayun Since it seemed to resolve your problem, I would be glad if you accept my answer. However, you're of course free to accept any other answer if it was more helpful/detailed etc. – SVSchmidt Jul 29 '17 at 14:08

score 4 · Answer 2 · answered Jul 29 '17 at 13:24

4

why map it twice? Let the request array return the actual promise from fetch.

let requestsArray = urlArray.map((url) => {
        let request = new Request(url, {
            headers: new Headers({
                'Content-Type': 'text/json'
            }), 
            method: 'GET'
        });

        return fetch(request).then(res => res.json());
    });

Now you have array of promises. Which Promise.all takes in.

Promise.all(requestsArray).then(allResults => {
  console.log(allResults)
})

Here's a jsfiddle that mocks this: https://jsfiddle.net/uu58t1jj/

answered Jul 29 '17 at 13:24

Bergur

3,962
12
20

I did try it this way but all my requests, bar one, seem to be pending in the network tab. The only one that gets resolved is the very first request. – random_coder_101 Jul 29 '17 at 13:54
Well looks like your code/method is correct then, but just that the fetch request isn't resolving. Have you tried manually opening these urls in the browser? Do they return something? What happens if you individually catch each request to see what's stopping? – Bergur Jul 29 '17 at 14:08
Yeah! I agree with @Bergur seems like the issue might be coming from your api. – Oluwagbemi Kadri Sep 16 '22 at 21:39

Using Promise.all to resolve fetch requests

2 Answers2

Linked