async & await ?

• Promise의 연속된 사용이 이루어지면 콜백의 문제점과 마찬가지로 가독성이 떨어진다.

• 위와 같은 Promise의 단점을 보완한 동기적 실행 순서를 보장하는 비동기 처리 API이다.

비동기 처리를 반드시 해야하는 이유

• JS 엔진은 블록({})안에 코드를 동기적으로 실행함

• 시간이 오래 걸리는 코드를 비동기 처리를 전혀 하지 않으면, 다음 코드에 문제가 발생할 수 있음

• 예를 들어 서버에서 data를 받아와서 웹페이지에 출력하는 시나리오가 있다. data를 받아 오는데 10초가 걸림, 근데 비동기 처리를 안하면 텅 빈 data를 출력 해버리는 심각한 상황

• Promise라는 object를 가지고 있으면 then 이라는 콜백함수만 등록하면 유저의 data가 준비 되는대로 등록한 콜백함수를 호출한다.

async

async를 사용한 함수의 코드 블록이 자동으로 Promise로 변환이 이루어지며 Promise를 반환한다.

// 1. 함수 선언식
async function fetchUser() {
  return `ellie`;
}

// 2. 함수 표현식
const fetchUser = async function() {
  return `ellie`;
};

// 3. 화살표 함수
const fetchUser = async () => {
  return `ellie`;
};

// fetchUser().then(data => console.log(data)); // 함수로 바로 호출
const user = fetchUser(); // 변수에 할당해서 호출
user.then(data => console.log(data));
console.log(user);

await

• async 함수 내부에만 사용 가능하며 비동기 처리를 위한 함수 앞에 작성한다.

• try/catch 문을 활용하여 error 처리

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

async function getApple() {
  await delay(1000);
  // throw new Error(`error: apple`); // error 발생
  return `🍎`;
}
async function getBanana() {
  await delay(1000);
  // throw new Error(`error: banana`);
  return `🍌`;
}

async function pickFruits() {
  let apple = null;
  try {
    apple = await getApple();
  } catch(error) {
    console.log(error);
  }
  let banana = null;
  try {
    banana = await getBanana();
  } catch(error) {
    console.log(error);
  }
  return `${apple} + ${banana}`;
}

pickFruits().then(result => console.log(result));

• await 병렬처리(Promise APIs 사용)

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

async function getApple() {
  await delay(1000);
  return `🍎`;
}
async function getBanana() {
  await delay(1000);
  return `🍌`;
}


async function pickFruits() {
  // 프로미스 객체는 선언 즉시 바로 실행됨
  // getApple과 getBanana는 병렬(독립적)로 실행됨
  const applePromise = getApple();
  const bananaPromise = getBanana();
  // 동기화
  const apple = await applePromise; 
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}
pickFruits().then(result => console.log(result));


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


// race : 가장 먼저 Promise 처리가 이루어진 Promise만을 반환한다.
function pickOnlyOne(){
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log)

참고자료

• https://www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=13