[JS] 비동기 모듈 함수 리턴값 가져오기

모듈이 비동기로 동작하는 함수일 경우 모듈 리턴값을 외부 함수에 가져오려고 하면 아마도 undefined만 출력될 것이다.

기존 코드

내부 함수(모듈)

export function fetchAdvice () {
  fetch("https://api.adviceslip.com/advice")
    .then((res) => res.json())
    .then((data) => {
      return data
    })
}

외부 함수

import { fetchAdvice } from './fetch'

// 아직 api 데이터를 가져오지 않았는데 모듈을 실행해버림 흑흑
const data = fetchAdvice();
console.log(data)  // undefined

해결

해결 요약

• 외부 함수에서 모듈을 동기적으로 다룰 수 있도록 코드를 변경해주면 된다.
• 모듈에 Promise를 생성하고, Promise의 콜백 함수에서 비동기 작업을 한다.
• 외부 함수에서 내부 함수를 실행한 후, then을 통해 동기적으로 Promise 결과 데이터를 받는다.

방법 1. Promise 방식

Promise를 통해 Promise 객체를 생성하고 외부 함수에서 활용하는 방법이다.

내부 함수(모듈)

export function fetchAdvice () {
  return new Promise (resolve => {
    fetch("https://api.adviceslip.com/advice")
      .then(res => res.json())
      .then(data => {
        resolve(data); // 내보낼 데이터 담기
      });
  })
}

외부 함수

import { fetchAdvice } from './fetch'

// 가져오기
fetchAdvice()
  .then(res => {
    console.log(res)
  });

방법 2. async/await 방식

async/await를 통해 Promise 객체를 생성하고 외부 함수에서 활용하는 방법이다.

내부 함수(모듈)

export async function fetchAdvice () {
  return await fetch("https://api.adviceslip.com/advice")
    .then((res) => res.json())
}

외부 함수

fetchAdvice()
  .then(res => {
    console.log(res)
  });

---

참고
https://senticoding.tistory.com/42