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.

Solution

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`))

Comments

[clurect]

You can also just do Promise.all([url1,url2]).then() as well

[jfriend00]

@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.

[Yury Tarabanko]

@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.

[clurect]

ah yes, my bad. It should've been promises.