[JavaScript] async await 어떻게 사용할까?

async & await 에 대해 알아보자

1. async await 이란?
   - async await은 자바스크립트의 비동기 처리 패턴입니다.
   - await을 통해 성공 처리의 반환값을 받는데, await은 Promise가 실패 시 에러가 나고 멈추기 때문에 try로 성공 처리, catch로 실패 처리를 합니다.
   - await을 만나면 다음라인으로 넘어가지 않고 await 옆에있는 코드가 완료 될 때까지 내부에 묶여있는 다른 코드가 실행되지 않습니다.
   - 다만, 외부의 묶여있지 않은 밑에 코드들은 순서대로 실행되고 있기때문에 완전히 멈추고 기다리는 것은 아닙니다.

2. async await 메서드
   - 메서드로는 try, catch, finally 가 있습니다.
   - try: promise 객체가 fulfilled 상태가 되면 실행할 콜백함수를 등록하는 메소드 입니다.
   - catch: promise 객체가 rejected 상태가 되면 실행할 콜백함수를 등록하는 메소드 입니다.
   - finally: 어떤 작업의 성공, 실패 여부와 상관없이 항상 실행하고 싶은 콜백함수를 등록하는 메소드 입니다.

3. 언제 사용할까? 콜백 지옥을 해결하기 위해!
   - 비동기 로직 처리 중 콜백 함수를 연속해서 사용할 때 콜백 지옥이 발생합니다.
   - 콜백 지옥은 콜백 함수 안에 또 다시 함수 호출이 반복되면서 코드의 들여쓰기가 보기 힘든 수준까지 간 상황을 말합니다.
   - 코드의 가독성을 떨어뜨리고, 예외 처리의 복잡도를 증가시키기 때문에 이를 해결하기 위해 async await 을 사용합니다.
   
   

async & await 코드 예시

1. async와 await 기본 예시

const fetchAndPrint = async () => {
  console.log(2);

  const response = await fetch('https://jsonplaceholder.typicode.com/users'); // 2번) 작업이 완료되면
  console.log(7); // 3번) 이어서 출력된다
  
  const result = await response.json();
  console.log(result);
};

console.log(1); // 1번) 실제 출력 순서를 콘솔안에 나타낸 것 입니다
fetchAndPrint();
console.log(3);
console.log(4);
console.log(5);
console.log(6);

2. try catch finally 메서드 기본 예시

const fetchAndPrint = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.log(error);
  } finally {
    console.log('END');
  }
};

fetchAndPrint();

3. try catch finally 메서드 심화 예시

function pick(menus) {
  console.log('Pick random menu!'); // 4번)

  const p = new Promise((resolve, reject) => {
    if (menus.length === 0) {
      reject(new Error('Need Candidates'));
    } else {
      setTimeout(() => {
        const randomIdx = Math.floor(Math.random() * menus.length);
        const selectedMenu = menus[randomIdx];
        resolve(selectedMenu);
      }, 1000);
    }
  });

  return p;
};

async function getRandomMenu() {
  console.log('---Please wait!---'); // 2번)

  try {
    const response = await fetch('https://learn.codeit.kr/api/menus');
    const result = await response.json(); // 객체 배열
    const menu = await pick(result); // 3번)
    console.log(`Today's lunch is ${menu.name}~`); // 5번)
  } catch (error) {
    console.log(error.message); // 7번) 만약 실패한다면 catch가 실행되고, finally가 실행된다.
  } finally {
    console.log('Random Menu candidates change everyday'); // 6번)
  }
};

getRandomMenu(); // 1번)