DEV Community


Posted on • Updated on

Discovering promise.All()

During this Phase, we've gone through many topics that have really boosted my coding skills in a short amount of time. Apart from learning the basic ideas of JavaScript, HTML, and CSS, some of the more complex but helpful subjects that stand out include event listeners, fetch, map, loops, and understanding asynchronous functions. In my Phase 1 Project, I used all these topics a lot to create a webpage that people can interact with, using data from an API.

One topic we haven't talked about yet that helped me a lot in understanding asynchronous functions is "Promise.all()". I found this when working on my Phase 1 Project and was trying to map data from one array to another and show it. This data was first fetched from an API and needed to be shown on my webpage after being mapped to the new array. Because of how JavaScript works, functions are done asynchronously, which means functions don't happen in order. Instead, since some tasks might take longer than others to finish, JavaScript lets other functions happen while others are still going on. This is where finding "Promise.all()" was really helpful.

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.

Image description

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.

To sum up, promises and asynchronous functions are both strong tools that programmers can use to their benefit by having control over how their code works in JavaScript. You can take advantage of asynchronous code due to the multitasking and speed it offers or take advantage of the control and order that Promise.all() gives. Knowing how to use them both is very important for any developer working with JavaScript, CSS, and HTML. I highly recommend a deep dive into these topics for beginners because it offers immense help in understanding the fundamentals and logic of how thing run in JavaScript.

Top comments (0)