DEV Community

How to use async/await with .map in js

Jordan Jaramillo on April 16, 2022

How to use async/await with .map in js At some point you may have wondered how to use asynchronous functions in methods like .map or .fo...
Read full post
Collapse
 
thuutri2710 profile image
Tris •

Could you help me explain what happen if there is a fetch request is failed in using Promise.all?

Collapse
 
jordandev profile image
Jordan Jaramillo •

yes, it is a good question I will give you an example that will solve your doubt.

Promise.all([
  Promise.resolve(20),
  Promise.reject("there was an error"),
  new Promise((resolve) => setTimeout(() => resolve(30), 300)),
])
  .then((values) => console.log(values))
  .catch((err) => console.error(err));


Promise.allSettled([
  Promise.resolve(20),
  Promise.reject("there was an error"),
  new Promise((resolve) => setTimeout(() => resolve(30), 300)),
]).then((values) => console.log(values));
Enter fullscreen mode Exit fullscreen mode

In the promise.all if a call fails then it will not enter the then but it will go directly to the catch.

But if you need it to return everything with its states you can use Promise.allSettled which will return an array with the status of each of the promises

script log

❯ node index.js
there was an error
[
   { status: 'fulfilled', value: 20 },
   { status: 'rejected', reason: 'there was an error' },
   { status: 'fulfilled', value: 30 }
]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thuutri2710 profile image
Tris •

Agree with you @jordan Jaramillo. Btw, we can also use Promise.all to resolve this problem. Assume that we're fetching many requests. If one of them is successful, we'll return:

{
  value: 20,
  status: success
}
Enter fullscreen mode Exit fullscreen mode

Otherwise

{
 value: null,
 status: failed
}
Enter fullscreen mode Exit fullscreen mode

How about your thought?

Thread Thread
 
jordandev profile image
Jordan Jaramillo •

The problem with promise.all is that you will not be able to access which ones were resolved correctly since it directly passes to the catch.

Thread Thread
 
thuutri2710 profile image
Tris •

I mean that if any request is failed, we still use resolve instead of reject. We only change the returned status.

{
  value: null,
  status: failed,
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jordandev profile image
Jordan Jaramillo •

yes, you can do it that way, it's a good idea I hadn't thought about it but if you want to have it automatically you can use allSettled.

Thread Thread
 
thuutri2710 profile image
Tris •

Agree !!!

Collapse
 
pankajgulabsharma profile image
pankajgulabsharma •

I have one question when I will use Promise.all and for of loop with async-await 🤔

Collapse
 
jordandev profile image
Jordan Jaramillo •

A case based on real work might be that you have an array of filenames and you want to get the data from each file asynchronously, in this case you would use Promise.all since the order doesn't matter and one doesn't depend on the other.

But what happens if in order to access the information of the next one you need to have the information of the previous one since they asked you to do so, then you must use for of since it is executed sequentially here.

Collapse
 
rishadomar profile image
Rishad Omar •

To expand on your file fetching example. You would use the for...of if you wanted to concatenate a set of files. For example: concatenate f1.txt f2.txt.
The sequence must then be f1.txt followed by f2.txt.
If promise.all was used and f2.txt was a small file while f1.txt was a huge file, then the concatenation would have the incorrect sequence.
PS I haven't tried this but will.

Thread Thread
 
jordandev profile image
Jordan Jaramillo •

Exact!

Collapse
 
harikanani profile image
HARIKRUSHN KANANI •

It really helps a lot. Thanks for sharing and your efforts 🙌🙌.

Collapse
 
jordandev profile image
Jordan Jaramillo •

Thank you so much 🙌🤝