[JavaScript] async, await

hayyim0626·2020년 10월 18일
1
post-thumbnail

1.What is async, await?

asyncawait는 자바스크립트의 비동기 처리 문법입니다.
기존의 비동기 처리 방식인 **Callback 함수**와 **Promise**의 단점을 보완하는 문법이죠.

2.async

async를 사용하는 방법은 밑의 코드와 같습니다. 함수 앞에 async를 붙이게 되면 해당 함수는 항상 **Promise 객체**를 리턴합니다.

async function number() {
  return 1
} 

number().then(console.log())	// 1

3. await

await는 항상 async함수 안에서만 동작합니다. 또한 자바스크립트는 await키워드를 만나게 되면 Promise가 처리될 때까지 기다립니다. 그리고 결과는 그 이후에 반환됩니다.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(2000);
  return 'apple';
}

async function getBanana() {
  await delay(2000);
  return "banana"
}

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`
}

4. 병렬적으로 async, await하기

앞선 코드를 실행하게 되면 총 4초가 걸리게 됩니다. pickFruits()함수에서 apple에 2초, banana에서 2초 총 4초가 걸리게 되는 것이죠. 그러나 두 함수는 서로에게 영향을 끼치지 않습니다.
코드의 성능을 더 좋게 하기 위해 두 함수를 병렬적으로 처리할 수 있다면 더 좋겠죠?
이를 가능하게 하는 두 가지 방법이 있습니다.

(1) 함수를 변수에 담아 실행

먼저 함수를 변수에 담아 처리하는 겁니다. 변수에 담게 되면 코드 블록이 바로 실행되기 때문입니다.

async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`
}

(2) Promise All

다음으로 Promise안에 있는 API를 활용하는 방식입니다. 프로미스 배열을 전달하게 되면 모든 프로미스들이 병렬적으로 처리되어 한꺼번에 모아주는 역할을 하게 됩니다.

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join(' + '))
}
pickAllFruits().then(console.log);
profile
내실 있는 프론트엔드 개발자가 되기 위해 오늘도 최선을 다하고 있습니다.

0개의 댓글