async, await 사용 연습 / 자바스크립트

 

일반 함수

function A1(){
  return setTimeout(() => console.log('Hello World'), 1000);
};

A1();

 

프로미스

function A2() {
  return new Promise((res, rej) => res('Hello World2'));
};

A2()
.then((say) => setTimeout(() => console.log(say), 2000));

 

async

async function A3() {return 'Hello World3'};

A3()
.then((say) => setTimeout(() => console.log(say), 3000));

 

await

연습용으로, 시간을 물어보고 대답하는 함수를 만들어보았습니다.

우선 시간을 얼마나 지체할건지에 대한 함수 tiktok()입니다.

const tiktok = (time) => {
  return new Promise((res, rej) => {setTimeout(res, time);})
};

 

시간을 물어보는 askTime(), 시간을 알려주는 answerTime()

async function askTime(){
  await tiktok(1000);
  return 'What time is it?'
};

async function answerTime(){
  await tiktok(2000);
  return `${new Date().getHours()}시 ${new Date().getMinutes()}분이야`;
};

 

 

 

만약 Promise chaining을 사용한다면?

function whatTimeIsIt(){
  return askTime()
  .then(value1 => {
    console.log(value1);
    return answerTime()
    .then(value2 => value2)
  });
};

whatTimeIsIt().then(console.log);

하지만 이보다 더 간단하게 표현할 수 있는 방법이 있으니, 바로 await을 사용하는 겁니다.

 

만약 await을 사용한다면?

async function whatTimeIsIt(){
  const ask = await askTime();
  console.log(ask);
  const answer = await answerTime();
  return answer;
};

whatTimeIsIt().then(console.log);

하지만 상위 코드대로 한다면 answerTime()은 askTime()의 작업이 끝날때까지 기다려야 합니다.

따라서 2초만 있으면 해결될 걸, 굳이 3초나 기다려야 한다는 뜻입니다.

이를 수정하기 위해서는 아래와 같은 방법이 있습니다.

 

async function whatTimeIsIt(){
  const askPromise = askTime();
  const answerPromise = answerTime();
  //Promise 내부의 작업을 수행!
  
  const ask = await askPromise;
  console.log(ask);
  const answer = await answerPromise;
  return answerPromise;
};

whatTimeIsIt().then(console.log);