function fetchUser() {
// 10초후 호출
return 'ellie'
}
const user = fetchUser(); // fetchUser를 불러오고 10초가 지나면 ellie 가 user에 담김
// 즉, fetchUser가 다 실행된 다음에야 아래 코드가 실행됨
// -> 이렇게 오래걸리는 요소는 어떻게 해야한다?? Promise로 해결
console.log(user);
function fetchUser() {
return new Promise((resolve, reject)=>{ //데이터 받아오면 ellie라는 데이터 호출해줄게 그러니 너는 아래 코드 실행하고 있어
//10초 후 호출
resolve('ellie');
});
}
const user = fetchUser();
user.then(console.log);
consolte.log(user);
→ async : 자동적으로 함수 안에 있는 블록들이 promise로 바꿔지게 해주는 역할
async function fetchUser() {
// 10초후 호출
return 'ellie';
}
const user = fetchUser();
user.then(console.log);
consolte.log(user);
function delay(ms){ //ms초 후에 실행
return new Promise(resolve => setTimeout(resolve, ms);
}
async function getApple(){
await delay(1000); //await을 쓰게 되면 delay가 끝날 때까지 기다려줌
throw 'error'; //에러 처리
return '사과';
}
async function getBanana(){
await delay(1000);
return '바나나';
}
// chaining 버전 : 위의 코드와 같음 (하지만 위의 코드가 더 동기적(위에서 아래로 읽히는 코드)으로 코드를 이해하는데 쉬움
async function getBanana(){
return delay(1000)
.then(()=>'바나나'
}
//콜백 지옥 버전
function pickFruits() {
return getApple().then(apple => {
return getBanana().then(banana => `${apple} + ${banana}`);
});
}
// 콜백 지옥 타파 버전 : async await의 환상적인 조화
async function pickFruits() {
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
// error 처리 방법
async function pickFruits() {
try {
const apple = await getApple();
const banana = await getBanana();
} catch () {
}
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
}