모듈이 비동기로 동작하는 함수일 경우 모듈 리턴값을 외부 함수에 가져오려고 하면 아마도 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 결과 데이터를 받는다.
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)
});
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)
});