how to handle multiple promises in async javascript function?

Question

see example below, I have an async function, I want to add a fetch call and make sure it returns before making a call to another function getCustomerData which returns a promise. how do i make sure my first api call is returned and complete before , i make a second call. I've noticed in my testing that code below, produces error because it looks likes at time second call is executed before first call is completed/returned.

async function getRecords() {
   
   //first api call
   fetch('api/getCustomerDetails', options).then(). catch(); 

   //second call 
   let response = await getCusotomerData().promise(); 
}

await fot the first mline so to execution sequence stops until it finishes — HijenHEK
– HijenHEK, Commented May 18, 2021 at 21:56

HijenHEK · Accepted Answer · 2021-05-19 09:06:16Z

1

you only need to add await ,async function means nothing without it, it simply waits for each process that comes after awaits keyword to finish before going to the next line of code .

then() and catch() will execute depending on the value of the fetch but they dont control the execution of code . for example you can put your second line in the then() and it will work the same as await .

usually you work with await or then & catch

async function getRecords() {
   
   //first api call
   await fetch('api/getCustomerDetails', options).then().catch(); 

   //second call 
   let response = await getCusotomerData().promise(); 
}

async function fn() {       // asynchronous function
   
   await process_a          // the await will not allow anything to happen before process_a finishs

   process_b                // this will wait for process_a to finish
}

you still need to verify the result of process_a so use its try & catch

async function getRecords() {
   
   //first api call
   fetch('api/getCustomerDetails', options).then(()=>{
         //second call in case first one is success
         let response = await getCusotomerData().promise(); 
         }).catch(()=>{
             //handle first api call errors here
         });
}

or use the try catch block in the answer below

edited May 19, 2021 at 9:06

answered May 18, 2021 at 22:04

HijenHEK

1,3061 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nuevacode Over a year ago

want to confirm by second line in your answer you mean the second call , right?

HijenHEK Over a year ago

yes , the now the getCustomerData().promise() will wait whatever comes before it and has the await keyword .

Seth Lutske · Accepted Answer · 2021-05-18 21:53:49Z

0

Lots of ways to do this. I think the cleanest is with try/catch

async function getRecords() {
   try{
       await fetch('api/getCustomerDetails', options)
       let response = await getCusotomerData().promise(); 
   } catch(e) {
       // error handling here
   }
}

Using await in front of the fetch call assures that the following lines won't execute until the fetch promise is complete. You may want to have more specific error catching logic, as the above block will catch any issues that arise in the entire try block, but you may want to catch errors on a more granular level (i.e. a .catch for the fetch).

answered May 18, 2021 at 21:53

Seth Lutske

11k9 gold badges57 silver badges122 bronze badges

3 Comments

nuevacode Over a year ago

thanks. I followed a tutorial for fetch and add fetch().then().catch() construct . do i need to add await fetch().then().catch()?

Seth Lutske Over a year ago

You can....doing await fetch(url).then(callback) within a try/catch block can be kind of silly if there's not much else going on in the block, but it is valid. doing await fetch(url).catch(errorCallback) in a try/catch means that you'll be catching any errors on that fetch, as opposed to within the entire try block, which is what my answer does. It just depends on how you want to organize the flow of things.

Seth Lutske Over a year ago

but as @HijenHEK said, you usually do async/await with try/catch, or .then().catch() syntax. You can mix them, but its generally best not to, as it can get confusing.

Collectives™ on Stack Overflow

how to handle multiple promises in async javascript function?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related