[javascript] async , await란?

async, await란?

기존의 콜백 함수와 프로미스의 단점을 보완한 비동기 처리 방식

( 함수가 종료 될때까지 기다려주기 )

 

async, await의 필요성

// fetchUser()함수의 데이터가 받아질 때까지 기다려야 한다고 가정함

// 기존 콜백 함수 이용한 비동기 방식

function logName(callback){
  var user = fetchUser('domain.com/users/1');
  callback(user);
}

logName(function (user){
  if (user.id === 1) {
    console.log(user.name);
  }
}); // 10줄 코드..



// async, await 이용한 비동기 방식

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
} // 6줄 코드!

// await는 async함수에서만 사용할 수 있다.

 

간단한 async, await 사용하기 ( es2021 )

(async () => {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
})();

 

async 작동방식

// async 함수는, Promise를 반환한다. 
async function f() {
  return 1;
}

f().then(alert)
// resolve시 then 호출 (Promise 작동)

 

await 작동방식

async function f() {
  
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolver('완료', 100))
  });
  
  let result = await promise; 
  //await를 Promise앞에 써주면, cpu가 동기 방식으로 Promise를 기다려줌.
  
  alert(result)
}

f()
// resolve시 then 호출 (Promise 작동)