[Javascript] async 와 await

0. 목차

1. 개요

2. async

3. await

4. 응용..?

1. 개요

 

https://kong-dev.tistory.com/120

[Javascript] 콜백지옥과 프로미스

저번 포스팅에서 프로미스를 다뤘었다.

그런데 프로미스도 then mthod를 연속적으로 체이닝 하다보면,

이 then은 뭐고

저then은 뭐고,

이 데이터는 어디 resolve에서 가져온걸까..

싶은 생각이 들게된다.

 

그래서 나온게 async와 await

 

그러니까..

비동기적으로 처리되는 코드의 순서를 정해주기 위해

사용할 수 있는 방법에는

콜백함수, 프로미스, async/await 이 있는 거임.

근데 콜백함수 보기 힘들다 가독성 떨어진다 해서 나온게

프로미스.

근데 그런 프로미스 마저 보기 힘들다 가독성 떨어져잉 더 쉽게 만들어줘어어

해서 나온게 async/ await 이다.

 

거참... 

2. async

function kong() {}

console.log(kong); // ƒ kong() {}
console.log(kong()); // undefined

 

비어있는 함수 kong을 하나 만들고,

그 함수 자체를 출력하니 kong 함수가 출력되고 ,

결과값도 출력을 해보니까 return 값이 없어서 undifined 가 출력 된다.

 

async function kong() {}

console.log(kong); // async ƒ kong() {}
console.log(kong()); // Promise {<fulfilled>: undefined}

 

이번에는 앞에 async를 붙인뒤에 같은 코드를 실행해보니,

함수의 형태 자체가 async 펑션으로 변경 되었고,

따로 리턴값을 정해 주지 않았음에도,

Promise 인스턴스 객체를 리턴하는 것을 알 수 있다.

 

즉, 함수 앞에 async를 붙여주면

일반 함수와는 다른 역할을 하게되며,

리턴값을 따로 지정해주지 않아도, 프로미스 객체를 리턴한다.

3. await

async가 대충 뭐하는 앤지 알겠다.

그럼 await은 뭐하는 앨까.

이름부터 뭔가 느낌이 온다.

흐음 예전에 영어 공부 할때가 생각난다.

wait과 await의 차이.

await이 좀더 문제 자체가 딱딱하고, 좀더 formal한 의미를 내포하고 있기에,

지시나, 공문서 같은 것에 사용 된다고 배운 것 같다.

뭐 javascript가 공문서는 아니니까

좀더 지시사항에 가깝겠지.

뭔가를 기다려! 라는 의미로 사용 되는 것일거다.

ㅎ...

예시를 보자 그냥..

 

function delay() {
  setTimeout(() => {
    return 'hello world';
  }, 2000);
}


function kong() {
  const hello = delay();
  console.log(hello);
}

kong();

 

delay 함수는 'hello world'를 리턴한다.

그리고 kong 함수는 그런 delay의 리턴값을 hello라는 변수에 할당하고,

hello라는 변수에 할당된 값을 출력하는 함수이다.

 

그럼 저 함수를 실행하면 'hello world ' 가 출력될까?

그렇지 않다.

delay 함수는 비동기 적으로 처리되기 때문에 2초동안 리턴값이 없는 상태이지만,

우리의 console.log는 그 2초를 기다려 주지 않는다.

가차없이 리턴값이 없으므로 undfined를 출력한다.

 

우린 프로미스를 사용할줄 아는 지성인이므로,

resolve 함수를 통해 hello world를 전달하고..!

then 을 이용해서 kong 함수를 실행시키고! kong 함수의 인자값에!

hello world를 전달한다면...!

 

function delay() {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res('hello world');
    }, 2000);
  });
}

function kong(data) {
  console.log(data);
}

delay() //
  .then(kong);

 

이런 코드를 짤 수가 있기는 하다...

뭔가 생각 해야 될것도 많고,

처리해줘야 되는 것도 많다.

너무 귀찮은데..

그냥 저 처음 코드에서 딜레이 함수끝날 때 까지 기다려..! 라고 해줄 순 없을까

할 수 있다

그게 바로 await 임 

 

function delay() {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res('hello world');
    }, 2000);
  });
}

async function kong() {
  const hello = await delay();
  console.log(hello);
}

kong();

delay 함수가 Promise 객체를 리턴하도록 변경만 해주고,

kong 함수앞에는 async를

delay 호출 앞에는 await을 붙여주면 아주 심플하게 원하는 결과를 얻을 수 있다.

 

await의 역할은 await이 붙은 함수의 실행이 끝날때까지 async가 붙은 함수의 진행을 멈춘다.

위에 말했듯이 await의 원래 뜻 마냥,

kong 함수에게 delay가 다 실행될때 까지 기다려!

라는 뜻이다.

 

4. 응용..?

 

function randomTime() {
  return Math.floor(Math.random() * 10) * 1000;
}

function errorFunction() {
  console.log('재고가 없습니다.');
}

function getChicken() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('동묘시장 -> chicken');
      resolve(getEgg);
    }, randomTime());
  });
}

function getEgg() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('동묘시장 -> chicken -> egg');
      resolve(getMeal);
    }, randomTime());
  });
}

function getMeal() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('동묘시장 -> chicken -> egg -> fried egg');
    }, randomTime());
  });
}

getChicken()
  .then((data) => data())
  .then((data) => data())
  .then((data) => console.log(data));

 

저번 포스트에서 만든 프로미스를 

async await으로 바꿔보겠다.

 

function randomTime() {
  return Math.floor(Math.random() * 10) * 1000;
}

function errorFunction() {
  console.log('재고가 없습니다.');
}

function getChicken() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('동묘시장 -> chicken');
      resolve(getEgg);
    }, randomTime());
  });
}

function getEgg() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('동묘시장 -> chicken -> egg');
      resolve(getMeal);
    }, randomTime());
  });
}

function getMeal() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('동묘시장 -> chicken -> egg -> fried egg');
    }, randomTime());
  });
}

async function getAllProcess() {
  const nxtStep = await getChicken();
  const nxtStep2 = await nxtStep();
  const result = await nxtStep2();
  console.log(result);
}

getAllProcess();

이렇게 하면 

요렇게

 

 

function randomTime() {
  return Math.floor(Math.random() * 10) * 1000;
}

function errorFunction() {
  console.log('재고가 없습니다.');
}

function getChicken(market) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${market} -> chicken`);
    }, randomTime());
  });
}

function getEgg(process) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${process} -> egg`);
    }, randomTime());
  });
}

function getMeal(process) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${process} -> fried egg`);
    }, randomTime());
  });
}

async function getAllProcess() {
  const chicken = await getChicken('동묘시장');
  const egg = await getEgg(chicken);
  const meal = await getMeal(egg);
  console.log(meal);
}

getAllProcess();

이렇게 하면

 

 

이렇게 출력된다

 

처음엔 이게 뭔가 싶었는데,

이것저것 만들어보고 자꾸 치다보니까 대충 뭔지 느낌이 온다.

역시 일단 치고 봐야된다