This article is focusing on showing a brief explanation of how to use Promise.all in a real example that I used in one of my recent projects. You can check the project in the following . Github repository What is Promise.all Executes promises in parallel and it waits until all of them are ready. Promise.all takes an array of promises and returns a new promise. The scenario we are going to use and why Promise.all is useful in this example. https://pokeapi.co/api/v2/type/ Check the for more information. official docs What do we want to achieve We want to show a list of pokemon with the name of the pokemon with its respective image. Obstacles returns a list of pokemon that contains the name but not the image URL, instead, it returns a URL where we can fetch more details of the pokemon including the image. https://pokeapi.co/api/v2/type/1 How to solve this case using ES6 One way to solve this is using , as we need to wait for all the promises to resolve (we are talking about fetching to the that we retrieved in the first fetch) to populate the list of pokemon with the name and the respective image. Promise.all URL How to combine Promise.all with fetch, map, async and await to make a cleaner code fetchPokemon = () => { initial = fetch( ) initialJson = initial.json() detailsData = initialJson.pokemon.map( i => { preFetchData = fetch(i.pokemon.url) preFetchData.json()
    }) payload = ( .all(detailsData)).map( ({ : data.name, : data.sprites[ ]
    })) .log(payload)
}

fetchPokemon() const async const await 'https://pokeapi.co/api/v2/type/1' const await //console.log(initialJson.pokemon) // data array const async const await return // uncomment this code if you want to see how it looks await Promise.all(detailsData) // const response = await Promise.all(detailsData) // console.log(response) const await Promise => data name image 'front_default' console With the code above, we'll have an array of objects which contain the name and image in each item. This array is ready to use to create a list with HTML and achieve what we pretend. Live Code I hope this can help you, there is a ton of use cases where you can apply , this is just one of them and, feel free to comment on this article if you like. Promise.all Find me at Github @viricruz and Twitter @viri_cruz14

Fetch

Twitter

How to Use Eslint With Webpack And ES6 Modules

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Fetch Date with Promise.all and Async / Await

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Use Eslint With Webpack And ES6 Modules

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Setup Webpack and Babel 7 for React

How to Use Eslint With Webpack And ES6 Modules

Babel: Your first code transformations

Configuring Your Phaser 3 Game With Webpack For Production

ELI5: Babel and the gang

How to Setup Webpack and Babel 7 for React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps