[자바스크립트] 13. async 와 await

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

---

async & await

Promise를 좀 더 간편하고, 간결하고, 또한 동기적으로 실행되는 것처럼 보이게 해줍니다.

---

1. async

- Promise를 사용한 경우

function fetchUser() {
  return new Promise((resolve, reject) => {
    'ellie';
  });
}

const user = fetchUser();
user.then(console.log);
console.log(user);

- resolve와 reject를 사용하지 않았기 때문에 pending 상태에 then으로 받지도 않았기 때문에, undefined가 됩니다.

 

- async를 사용하는 경우

async function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie';
}

const user = fetchUser();
user.then(console.log);
console.log(user);

- 함수 앞에 async를 쓰면 Promise 를 바로 만들수 있습니다.

---

2. await

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

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

async function getBanana() {
  await delay(3000);
  return 'banana';
}

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

pickFruits().then(console.log);

- Chain 형태로 기다리게 했던 형태

function getBanan() {
    return delay(3000)
        .then(() => 'banana');
}

 

- await를 사용하여 기다리게 하는 형태

async function getBanana() {
  await delay(3000);
  return

 

- 기존의 출력 형태

function pickFruits() {
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple}+${banana}`);
    });
}

- 점점 콜백지옥과 동일하게 되는 것처럼 보인다.

 

- async 와 await를 사용하는 경우

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

- 여기서 주의할 점이 있습니다.

 

const applePromise = getApple();
  const bananaPromise = getBanana();

- 이 코드를 미리 선언한 이유에 대해서 입니다.

- 이 코드가 없다면 apple를 만드는 동안 기다릴 것입니다. 그리고 banana가 만들어 집니다.

하지만 미리 선언을 해두면 동시에 진행이 되면서 기다리기 때문에, 서로 기다릴 일이 없어지게 됩니다.

 

3. Promise의 API를 이용

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]) //
    .then((fruits) => fruits.join(' + '));
}
pickAllFruits().then(console.log);

function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

- 첫번째 함수의 all은 동시에 2개를 만들어 줍니다.

- 두번째 함수는 먼저 들어오는 것을 리턴해줍니다.