[React] Async / Await 기본

Promise

JS에서 비동기 작업의 최종완료 또는 실패를 나타내는 객체

• 비동기 작업이 수행될때 그 결과값을 받기위한 약속으로 사용
• 비동기 작업의 결과에 따라 콜백함수로 연결 가능
• .then .catch() .finally() 메소드를 사용해 연속적으로 결과 처리
  -> 코드의 가독성을 높일 수 있음

Pending 대기중

초기상태
아직 성공 또는 실패가 결정되지 않은 상태

Fulfilled 이행된

연산이 성공적으로 완료되어 프로미스가 결과 값을 반환한 상태

Rejected 거부됨

연산이 실패하거나 오류가 발생한 상태

예시

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!'
});

---

Async 함수의 정의

정의 방법

async 키워드를 함수 선언 앞에 붙여 정의

• 항상 promise 반환

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


--------같은 의미 ------

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

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

---

Await

이점

• Promise 완료를 기다리는 동안 함수의 실행을 일시적으로 중단
• Promise 가 해결되면 자동으로 함수의 실행을 진행함

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 없이 promise를 사용하면 .then() -.catch를 사용해야함

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