10. async / await

김혜지·2021년 4월 26일

1. async

  • Promise

function fetchUser() {
return new Promise((resolve,reject) => {
// return ellie; // pending
resolve(ellie); //fulfilled
// reject(new Error(error)); // rejected
});
}
const user = fetchUser();
//console.log(user);
user.then(user => console.log (user));

  • async: 함수 앞 사용시 코드블럭이 자동으로 promise로 바뀐다.

//1
async function fetchUser() {
return 'hyeji';
}
//2
const fetchUser = async function() {
return 'hyeji';
};
//3
const user = fetchUser(); // 변수 할당 후 호출
user.then(data => console.log(data));
console.log(user);
};

2. await

  • await: async 함수 내부에만 사용 가능

function delay(ms) {
return new Promise (resolve => setTimeout(resolve, ms));
}
async function getApple() {
await delay(1000);
return 🍎;
}
async function getBanana() {
await delay(1000);
return 🍌;
}
async function pickFruits() {
let apple = null;
try {
apple = await getApple();
} catch(error) {
console.log(error);
}
let banana = null;
try {
banana = await getBanana();
} catch(error) {
console.log(error);
}
return ${apple} + ${banana};
}
pickFruits().then(result => console.log(result));

  • await 병렬처리

function delay(ms) {
return new Promise (resolve => setTimeout(resolve, ms));
}
async function getApple() {
await delay(1000);
return 🍎;
}
async function getBanana() {
await delay(1000);
return 🍌;
}

  • Promise APIs

function pickAllFruits() {
return Promise.all([getApple(), getBanana()]).then(fruits => {
return fruits.join(+);
});
// return Promise.all([getApple(), getBanana()]);
}
pickAllFruits().then(console.log);

  • 가장 먼저 리턴하는 아이만 출력

function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);

0개의 댓글