비동기 및 대기 #JS 현대 개념.

Promise의 복잡성을 처리하기 위해 Async 및 Await가 들어갑니다.
그것은 동기식처럼 보이게 하기 위한 지옥의 콜백 문제이지만 배후에서 비동기식 및 비 차단으로 작동합니다.

const myFunction = () => { return 'Test'; } // Normal function
const myAsyncFunction = async () => {return 'Test'; } //Async function which will return a Promise now.

위와 같이 이제 () 앞에 async를 추가하기만 하면 Promise와 같은 함수를 만들 수 있습니다.

우리는 이제 자식 함수가 실행을 마칠 때까지 기다리는 함수를 원합니다.

아래 예를 살펴보십시오.

function FirstFunction(){
   setTimeout(function(){console.log('execution line we want to execute first and want to wait till 5 seconds.');}, 5000);
}

function SecondFunction(){
FirstFunction();
console.log('execution line we want to call last.');
}

function Start() {
      SecondFunction(); // Calling only second one as first called inside of it.
}

Start();// Calling start function

Output: 
"execution line we want to call last."

//Wait for 5 seconds to get below as we applied 5 seconds timeout.
"execution line we want to execute first and want to wait till 5 seconds."

위의 예에서와 같이 완료될 때까지 5초를 기다리지 않습니다.

이제 5초까지 기다리게 하기 위해 await를 사용하여 달성하는 방법은 다음과 같습니다.

const FirstFunction = async () => {
    return new Promise(resolve => {
    setTimeout(function(){return resolve('execution line we want to execute first and want to wait till 5 seconds.'); // Here creating promise is necessary and resolve in setTimeout to return resolve to make it synchronous
}, 5000);
  });
}

const SecondFunction = async () => { //remember we have to make it async so to use await in this function
const x = await FirstFunction(); // First function that is having async so it act like Promise here.
return x + '\nexecution line we want to call last.';
}

SecondFunction().then(res => {
  console.log(res)
});// Calling start function

Output: 
"execution line we want to execute first and want to wait till 5 seconds."
"execution line we want to call last."