8월 21일 TIL - Promise에서 PromiseResult 데이터 꺼내기

Supabase의 interest 테이블 데이터 가져오기

let interestArr;
  const getInterestsList = async () => {
    let { data: interest, error } = await supabase.from('interest').select('*');
    if (interest) {
      console.log(interest);
      return interest;
    }
  };
  interestArr = getInterestsList();
  console.log('interestArr => ', interestArr);

 

getInterestsList 함수는 비동기 함수이므로 함수 내에서 await를 사용하여 Supabase에서 데이터를 가져오고 있다. 

비동기 함수 내부에서 받아온 interest를 콘솔에 찍어보면 

위와 같이 잘 찍혀 있지만

 

비동기 함수 밖에서 콘솔을 찍으면 

비동기 함수 안에서 콘솔을 찍은 것과 다르게 프로미스로 찍힌다. 

 

getInterestsList 함수는 비동기 함수이기 때문에, 함수가 완료되기 전에 다음 코드인 console.log('interestArr => ', interestArr)가 실행이 먼저 된다. 이로 인해 interestArr에는 아직 데이터가 할당되지 않은 상태이므로 프로미스의 pending 상태가 출력이 된다.

 

프로미스의 결과를 밖에서 얻으려면 getInterestsList 함수를 호출한 다음, 그 결과를 처리하기 위해 .then() 또는 async/await를 사용해야 한다.

 

//.then() 사용

getInterestsList()
  .then(interestArr => {
    console.log('interestArr => ', interestArr);
  })
  .catch(error => {
    console.error('Error:', error);
  });

async function fetchData() {
    try {
      const interestArr = await getInterestsList();
      console.log('interestArr => ', interestArr);
    } catch (error) {
      console.error('Error:', error);
    }
  }