Search code examples
angulartypescriptasync-awaitangular-promise

How exactly works this async-await method call? is it correct?


I am not so into Angular and async programming and I have the following doub.

Into a service class I have this async method:

  async aestheticEvaluationExist(patientUID: string) {
    console.log("patientUID: ", patientUID);
    //return this.firestore.collection('aestetic-evaluation').doc(patientUID).get();   

    //const docRef = (await this.firestore.collection('aestetic-evaluation').doc(patientUID).);
    const exists: boolean = (await this.firestore.collection('aesthetic-evaluation').doc(patientUID).get().toPromise()).exists;

    console.log("aesteticEvaluationExist() exists: ", exists);

    return exists;
  }

Then into my component class I have this method calling the previous service method::

let isUpdate = true;
(await this.patientService.aestheticEvaluationExist(this.patientUID)
                   .then(res => {
                                  console.log("RES: ", res);
                                  isUpdate = res;
                                }));

console.log("isUpdate: ", isUpdate); 

As you can see it have awayt keyword before method call.

It seems to works fine (the output is correct) infact into the then() my res is false and when I print it by the last console.log() line it print false, it means that the original true value was correctly overwritten.

I am aksing if this async service method definition with the await keyword on the method call it ensure me that my last console.log() line is executed after that my method completed.

Is it my understanding correct? Or to ensure the correct result I have to perform this last operation inside the then()?


Solution

  • I am aksing if this async service method definition with the await keyword on the method call it ensure me that my last console.log() line is executed after that my method completed.

    Yes, roughly. async/await is syntax for creating and consuming promises. An async function returns a promise. When code in the async function reaches the first await, the function returns its promise, waits for what the code used await on to settle, and then continues with the function logic, eventually settling the promise the async function returned.

    So the logic of the function won't progress to that console.log until the promise you're awaiting is settled.


    Note that there's rarely a reason to combine explicit calls to promise methods like then and catch with async/await syntax. Use one or the other. (There's also no need to wrap the await operator and operand in ().) In this case, you can replace this:

    let isUpdate = true;
    (await this.patientService.aestheticEvaluationExist(this.patientUID)
        .then(res => {
            console.log("RES: ", res);
            isUpdate = res;
        }));
    console.log("isUpdate: ", isUpdate); 
    

    with

    let isUpdate = true;
    const res = await this.patientService.aestheticEvaluationExist(this.patientUID);
    console.log("RES: ", res);
    isUpdate = res;
    console.log("isUpdate: ", isUpdate); 
    

    or perhaps even

    let isUpdate = await this.patientService.aestheticEvaluationExist(this.patientUID);
    console.log("isUpdate: ", isUpdate);