If you are working with API, web development, or backend logic, there will be a time where you will need to loop a certain array and call an endpoint to get a result or response from an API.
In this example, we will be using dummy API from Dummy JSON to call the endpoint.
I'll show you directly since this is a tutorial to show how to use async await process using map function and Promise.all in Javascript. Read more below for the comparison and explanation between for loop and map function.
This is how you use map function with async await process.
Well technically, you can use for loop like below to call an endpoint
And when you run it, you will get result of an array of object, something like this.
with an average of time around 4.2 seconds to 4.6 seconds to get all the result (run the program around 5 times).
This will slow the process and you will need to wait one by one for the endpoint to give the response then you can proceed with the next one until you have loop all the array, and this will increase your response time to load all the resources.
Now, lets compare back for loop and map function.
map() creates a new array from calling a function for every array element and it calls a function once for each element in an array. It does not execute the function for empty elements and map() does not change the original array.
A for loop repeats until a specified condition evaluates to false. The JavaScript for loop is similar to the Java and C for loop.
Basically, both of them do a loop for the array. For loop, will only loop, while map function, will loop also, but it loop a function and creates a new array as a response. Since map function creates a new array, we can pass this to Promise.all, as Promise.all takes an array of promises as input and returns a single Promise
This returned promise fulfills when all of the input's promises fulfill (including when an empty iterable is passed), with an array of the fulfillment values.
As easy summary for Promise.all, if we have 5 products info to get from database, all 5 endpoint will be executed at the same time. Does this make sense to you? (Hope you can understand :p)
This is time taken for map function and Promise.all to return all the 5 products.
I know that for loop is much more faster (You can read the comparison here), but in this case, we are getting information from API response, so we need something other than for loop to receive the response faster. Each function/loop have its own use case, and in this case, my suggestion, it's better to use map function with Promise.all.
By the way, you can also use Promise.all with for loop, but you might need to push the Promise to an array first using for loop, then, pass the array of Promises to Promise.all as an input. But, I prefer to use map function as I can see the logic clearly.
That's it for this article, feel free to comment below if you think there are better way to use async await process with map function and Promise.all :)
Thank you for reading :D
Psstt pstt :p
Do consider to love this article ❤️ and follow me! Why not right? It's FREE~
I would really appreciate it 👨🏻💻
Will be posting more on things related to AWS, Javascript, Serverless and more!
Top comments (0)