study 03. Async & Await

1. Async & Await란?

• Async 는 비동기라는 의미를 가진 Asynchronous의 줄임말
• Async Function 객체를 반환하는 하나의 비동기 함수(이벤트 루프를 통해 비동기적으로 작동하는 함수)를 정의
• Promise를 간결/간편하고 동기적으로 실행되는 것처럼 보이게 해줌

2. Async & Await 사용 이유

1. 코드의 가독성 (코드 품질의 향상)
   • async & await 를 사용하면 복잡한 프로미스에서 데이터를 받아온 시점에 결과를 출력하기 위해서 사용했던 .then() 이나 에러 처리를 위해 사용했던 catch() 구문없이 프로미스를 다루고 비동기 코드의 가독성을 높일 수 있다.
   • promise 로 계산되는 식 앞에 await를 써주면 프로미스가 해결될 때까지 대기하다가 해결된 후 함수의 나머지 부분이 실행된다.
2. 비동기 처리를 해야 하는 이유
   • 시간이 오래 걸리는 코드( ex)서버에서 받아와서 페이지에 출력하는 데이터 )를 비동기 처리 하지 않으면, 다음 코드에 문제가 발생할 수 있다.

3. Async & Await 기본 문법

• 먼저 함수의 앞에 async라는 예약어를 붙이고 함수의 내부 로직 중 HTTP통신을 하는 비동기 처리 코드 앞에 await를 붙인다. 여기서 주의할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다.
• 일반적으로 await 의 대상이 되는 비동기 처리 코드는 axios 등 프로미스를 반환하는 API 호출 함수이다.

async function 함수명() {
	await 비동기_처리_메서드명();
}

4. Async

4 - 1. Promise  사용

// 프로미스를 사용하면 반드시 resolve와 reject를 호출해야 함
function fetchUser() {
  return new Promise((resolve, reject) => {
    // return `hi`; // 프로미스 pending(대기) 상태
		resolve(`hi`); // 프로미스 fulfilled(이행) 상태
		// reject(new Error(`error`)); // 프로미스 rejected 상태
  });
}

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

4 - 2. Async

// arrow function
const fetchUser = async () => {
  return `hi`;
};

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

5. Await

• await연산자는 promise를 기다리기 위해 사용된다. async에는 await 식이 포함될 수 있으며, await 는 async 함수의 실행을 일시 중지하고 전달된 promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료 후 값을 반환한다.
• await 문은 Promise가 fulfill 되거나 reject 될 때까지 async 함수의 실행을 일시 정지하고, Promise가 fulfill되면 async 함수를 일시 정지한 부분부터 실행한다. 이 때 await문의 반환값을 Promise에서 fulfill된 값이 된다.

5 - 1. Promise

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

function getApple() {
  return delay(1000)
  .then(() => `apple`);
}
function getBanana() {
  return delay(1000)
  .then(() => `banana`);
}

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

5 - 2. Await

• await 는 async 내에서만 사용 가능하다.
• error 처리는 try/catch문

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

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

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));