一起使用 async await and.then

Question

Is there any harm in using async/await and .then().catch() together such as:

async apiCall(params) {
    var results = await this.anotherCall()
      .then(results => {
        //do any results transformations
        return results;
      })
      .catch(error => {
        //handle any errors here
      });
    return results;
  }

Answer 1

I always use async/await and .catch() instead of using async/await and try/catch to make code compactly.

 async function asyncTask() { throw new Error('network') } async function main() { const result = await asyncTask().catch(error => console.error(error)); console.log('result:', result) } main();

If you want to get a fallback value when an error happened, you can ignore the error and return a value inside the .catch() method

 async function asyncTask() { throw new Error('network') } async function main() { const result = await asyncTask().catch(_ => 'fallback value'); console.log('result:', result) } main();

Answer 2

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

As you can see from below example that you can use two ways to handle await result and errors,The keyword await makes JavaScript wait until that promise settles and returns its result (One you get from resolved promise).So as such there is no harm (I don't fully understand what you refer as harm here).

 function returnpromise(val) { return new Promise((resolve, reject) => { if (val > 5) { resolve("resolved"); // fulfilled } else { reject("rejected"); // rejected } }); } //This is how you handle errors in await async function apicall() { try { console.log(await returnpromise(5)) } catch (error) { console.log(error) } } async function apicall2() { let data = await returnpromise(2).catch((error) => { console.log(error) }) } apicall2(); apicall();

For further reference have a look at- MDN DOCS

Answer 3

If you use Async/await you don't need to chain .then() just store the result returned by you resolve() in a variable ( response in the example) but if you want to handle the errors you have to try/catch your code :

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

in your promise use:

throw new Error("oops!");

Or

Promise.reject(new Error("Whoops!"));

Answer 4

Don't want to raise the dead, but want to point out that using await along with a then chain means that the result of:

const x = await someAsyncFn().then(() => doSomeLogging());

The value of x is assigned the return value of .then , which wasn't super intuitive to me.

Answer 5

I don't think mixed use async/await + then is a good idea. Especially when you focus on the async func's res, mixed use will bring some risk to distort your res silently.

example:

const res = await fetchData().then(()=>{return "something else"}).catch((err)=>{});

console.log(res); // not expected res data but something else

So, mixed use is dangerous , by the way, it'll do harm to read codes.

Answer 6

there is no harm, but it's more code and harder to read, you can do this instead:

async apiCall(params) {
 try{
   var results = await this.anotherCall()
    return results;
 } catch(err){
   //do something with the error
 }
}

although I'm not sure what you are trying to do here, but returning the results in the try block only means that the function may return undefined in error cases.

also it's important to remember that async functions always return a promise, so to use the apiCall function you have 2 ways of doing it:

// 1- using .then to access the returned value
apiCall().then(results => {
   if(results){
      //doing something with the results
  }
})

// 2- awaiting the function inside another async function
async anotherFunction(){
  const results = await apiCall();
  if(results){
      //doing something with the results
  }
}

and using if(results) ensures that you are dealing with something other than undefined

Answer 7

Just to add to this set of answers I always use await with then to make code more readable like so(aws example):

I found this code snippet years ago(to function), probably somewhere on stack, I just can't remember where!

async function myFunction(){
  var params = ....
  
  // either err will be null and data will have a value or if an exception was caused then data will be null and err will contain the information from the catch.
  let [err, result] = await to(route53.changeResourceRecordSets(params).promise())

  if(err){

    // handle the error
  }

  // carry on
}

to(promise){ // dunno why I called "to" call it anything you like.
  return promise.then((data) => {
  return [null, data]
 }).catch(err => [err])
}