01. Async / Await 기본

🚩 async 와 await는 ES2017(ES8)에 도입된 비동기 처리의 현대적 패턴입니다.
🚩 이 구문은 기존의 복잡한 프로미스 체인을
🚩 동기적인 흐름으로 작성할 수 있게 도와줍니다.

1-1. Promise

Promise는 Javscript에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.
이 객체는 비동기 작업이 수행될 때 그 결과값을 나중에 받기 위한 약속으로 사용됩니다.

Promise는 주로 서버로부터 데이터를 요청하고 받아오는 HTTP 요청 처리에 사용되며,
파일 시스템 작업을 비롯한 다양한 비동기 작업에 활용됩니다.

Promise는 세 가지 상태 중 하나를 가집니다.
* Pending (대기 중) : 초기 상태로, 아직 성공 또는 실패가 결정되지 않은 상태입니다.
* Fulfilled (이행됨) : 연산이 성공적으로 완료되어 프로미스가 결과 값을 반환한 상태.
* 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!'
});

1-2. Async 함수의 정의

🚩 Async 함수 정의 방법은?

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

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

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

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

1-3. Await

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

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