Async/Await 기본

💡 async, await 비동기 처리의 현대적 패턴이다.
기존의 복잡한 프로미스 체인을 간결하고 동기적인 흐름으로 작성할 수 있게 도와준다.

(1) Promise 😩

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
비동기 작업이 수행될 때 그 결과값을 나중에 받기 위한 약속으로 사용
주로 서버로부터 데이터를 요청하고 받아오는 HTTP 요청 처리에 사용
파일 시스템 작업을 비롯한 다양한 비동기 작업에 활용

Promise 는 세가지 상태 중 하나를 가진다.

• Pending (대기중) : 초기 상태로, 아직 성공 또는 실패가 결정되지 않은 상태
• Fullfilled (이행됨) : 연산이 성공적으로 완료되어 프로미스가 결과 값을 반환 한 상태
• Rejected (거부됨) : 연산이 실패하거나 오류가 발생한 상태

Promise 객체를 사용하면, 비동기 작업의 결과에 따라 콜백함수를 연결할 수 있으며 .then(),.catch() 그리고 .finally() 메소드를 이용해 연속적으로 결과를 처리할 수 있다.
👉 콜백 지옥(Callback hell)을 피하고 가독성을 높인다.

const myPromise = new Promise(function(resolve, reject) {
  // 비동기 작업을 수행하고
  if (/* 작업 성공 */) {
    resolve('Success!');
  } else {
    reject('Error!');
  }
});

myPromise.then(function(value) {
  // 성공(resolve)한 경우 수행
  console.log(value);  // 'Success!'
}).catch(function(error) {
  // 실패(reject)한 경우 수행
  console.error(error);  // 'Error!'
});

(2) Async 함수의 정의

1. Async 함수 정의 방법

async 함수는 async 키워드를 함수 선언 앞에 붙여 정의.
🎁 이 함수는 항상 Promise를 반환한다.

async function fetchData() {
  return 'Data loaded';
}

// 아래 코드와 같아요.
// async function fetchData() {
// 	return Promise.resolve('Data loaded');
// }

fetchData().then(console.log); // 'Data loaded'

(3) Await

1. await 사용의 이점

await 를 사용하면 프로미스의 완료를 기다리는 동안 함수의 실행을 일시적으로 중단하고, 프로미스가 해결되면 자동으로 함수의 실행을 재개

• 비동기 코드의 동기적 표현이 가능
  ∴ 코드의 가독성 향상

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();
    console.log(json);
  } catch (error) {
    console.error("Data loading failed", error);
  }
}

fetchData();

2. await 미사용의 문제

await 사용 없이 프로미스를 처리하면 .then()과 .catch() 메서드를 사용하여 프로미스 체인을 구성해야한다.
반복적인 depth 마다 복잡한 체인을 만듦
∴ 코드의 가독성 저하 / 유지보수 난이도 상승

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Data loading failed", error));
}

fetchData();

비동기가 나를 괴롭힌다.
역시 동기사랑 나라사랑 😿