In the example below, Promise.all() makes the "displayPokemon(pokemonData)" wait for the "promises" array to map our data to the other array "pokemonData" before it shows on our webpage. Without "Promise.all()", if the rest of the code loads before the data is returned from the API, the array will come back as undefined and prevent the webpage from functioning properly as there is no data being read. Using Promise.all allows the array to be populated before continuing with the rest of the code. This ensures that the user experience remains smooth and that the data displayed is accurate and up-to-date.
The code above is from my Phase 1 Project where I made a Gen 1 Pokedex that shows all Gen 1 Pokemon images, names, and types. I used a publicily accessible API called pokeAPI. The API being used has tons of data on every Pokemon that I didn't need, so I created a for loop to go through the first 150 Pokemon, which includes all of Gen 1. Then, all that is saved in an array called "promises". Since I only needed the image, name, and type, I made another array called "pokemonData" and moved the data I needed from the "promises" array to the "pokemonData" array, which would have the changed data I need to show.
At first, nothing was loading right when running the displayPokemon(pokemonData) function. This is because displayPokemon(pokemonData) is happening while the earlier function to map the array is still going on. I had to use the "Promise.all()" function so that displayPokemon(pokemonData) would wait for the earlier function to finish. Some other examples of code that need the use of Promise.all() are any functions that take a lot of time like reading or writing files or doing complex calculations.
There is one more feature that "Promise.all()" has that I haven't learned yet is catching errors. An example of trying to catch errors is using the ".catch" which can look something like this: ".catch(error => console.error(error));". This is an essential feature because it allows developers to handle errors easily, ensuring that the user experience is not negatively impacted by unforeseen issues in the code.
The reason "Promise.all()" is so nice to work with is because asynchronous functions are a pain and take a lot of time to debug since errors can happen at any point of working on all the different functions happening. By using "Promise.all()", developers can have more control over the order in which their code is executed, making it easier to manage complex tasks and ensuring that everything runs smoothly and as intended.
There are situations where asynchronous code can be beneficial such as network requests, event handling on a webpage, and parallel processing. This is because in those situations, waiting for other processes to finish will bottleneck and slow everything down. Its important to know when to take advantage of Promise.all() but also be mindful of the effects it will have on speed and processing power. For example in the code above the loop is using a considerable amount of computing power. So as powerful as Promise.all() is, you have to recognize when it is not necessary and take advantage of the natural advantages that asynchronous code can offer.
Top comments (0)