Making multiple fetch api calls how to check if all calls have finished?

Question

I am grabbing content from multiple urls. Fetch api uses promises all over.

So my code for one requests looks like this

fetch(url).then((response)=>response.text()).then(function(html) { //stuff });

now i have array of urls and multiple calls will be made how do i know if all calls have finished.

i tried using Promise.all but if you see there are two promises for every request. Is there a better way, also Promise.all support is not that good either.

`Promise.all` will work fine here as long as you chain the requests. And anywhere `fetch` is supported, `Promise` will be too. — Dan, Jul 01 '16 at 17:16
ok can you give me example if you have array of urls how would you use promise.all — Muhammad Umer, Jul 01 '16 at 17:19
`Promise.all(urls.map(url => fetch(url).then(res => res.text()).then(html => (/* stuff */))).then(() => console.log('all urls were fetched and processed'))` — Yury Tarabanko, Jul 01 '16 at 17:24

score 22 · Accepted Answer · answered Jul 01 '16 at 18:19

22

Assuming you have an array of urls named urls

// separate function to make code more clear
const grabContent = url => fetch(url)
     .then(res => res.text())
     .then(html => (/* process html here */))

Promise
    .all(urls.map(grabContent))
    .then(() => console.log(`Urls ${urls} were grabbed`))

answered Jul 01 '16 at 18:19

Yury Tarabanko

44,270
9
84
98

You can also just do `Promise.all([url1,url2]).then()` as well – clurect Jul 01 '16 at 18:32
5

@clurect - That isn't enough. `Promise.all()` accepts an array of promises. It won't do anything useful if you just pass it an array of URLs. – jfriend00 Jul 01 '16 at 18:56
@clurect `urls` is an array of strings (From OP: now i have array of urls ). Wrapping it with a Promise doesn't make much sense. – Yury Tarabanko Jul 01 '16 at 19:00
ah yes, my bad. It should've been promises. – clurect Jul 01 '16 at 19:41

Making multiple fetch api calls how to check if all calls have finished?

1 Answers1