241106

수달·2024년 11월 7일

TIL

데브코스 프론트엔드

목록 보기

21/25

nest api

async (sugar syntax), Promise

await: 비동기 함수를 기다리는 역할
함수 어떤 값이 반환되면 해결됐다 라고 치기

동기

보통의 프로그램에서는 작업
하나의 작업이 끝나야 다음 작업이 진행됨

비동기

여러 작업을 동시에 처리할 수 있는 방법
사용자 경험을 개선하기 위해 자주 쓰임
예) 웹 페이지가 데이터를 불러오는 동안 다른 작업을 할 수 있게 해주기 위함

Promise

비동기 작업이 끝났을 때 결과를 약속하는 객체
대기(pending): 아직 작업이 완료되지 않은 상태
성공(fulfilled): 작업이 성공적으로 완료되어 원하는 결과가 나왔을 때
실패(rejected): 작업이 실패해서 에러가 발생했을 때
어떤 작업이 끝나면 성공(fulfilled)했는지, 아니면 실패(rejected)했는지 알려주겠다는 의미
resolve 또는 reject를 호출

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // 데이터를 불러오는데 시간이 걸린다고 가정하자
    setTimeout(() => {
      // 성공적으로 데이터를 불러왔다고 가정하면
      resolve("데이터 불러오기 성공");
      
      // 만약 에러가 났다면 아래 줄을 사용
      // reject("데이터 불러오기 실패");
    }, 1000); // 1초 후에 작업을 완료
  });
};

fetchData()
  .then((result) => {
    console.log(result); // 데이터 불러오기 성공
  })
  .catch((error) => {
    console.error(error); // 데이터 불러오기 실패
  });

resolve와 reject는 동시에 호출할 수 없음
Promise는 한 번만 상태가 결정되면 그 상태가 고정됨
한 번 resolve나 reject가 호출되면 그 이후에는 다른 상태로 바꿀 수 없음

then 메서드

Promise가 성공적으로 완료되었을 때(즉, resolve가 호출되었을 때) 실행할 코드를 지정해주는 메서드
Promise가 "성공" 상태일 때만 호출되고, resolve의 결과값을 인수로 받아와서 처리할 수 있음

async / await

Promise를 더 쉽게 쓸 수 있는 문법
기본적으로 Promise를 반환하고, await 키워드를 사용해서 Promise가 해결될 때까지 기다릴 수 있음
실제 값은 await를 통해 추출 가능

const getSunIcon = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("🌞");
    }, 1000);
  });
};

const getWeatherIcon = async () => {
  const sun = await getSunIcon();	
  // await는 getSunIcon 함수가 반환하는 Promise가 완료될 때까지 기다림
  // getSunIcon은 1초 후에 🌞를 반환하는 Promise를 반환하므로, getWeatherIcon은 1초 동안 대기
  // sun 변수에는 1초 후에 🌞가 저장
  console.log(sun);
};

getWeatherIcon();
// getWeatherIcon 함수가 실행 -> 그 안에서 await getSunIcon()이 실행 -> Promise가 해결될 때까지 기다려야 함
console.log("end");
// getWeatherIcon의 실행과 상관없이 즉시 실행, getWeatherIcon이 실행되는 동안 바로 출력