동영상 수강 전 본문 내용 스캔.
동영상 수강 후 본문 내용 스캔.
안 보고 직접 코드 타이핑 하기.
// async & await
// clear style of using promise
// promise를 좀 더 간결・간편・동기적으로 실행되는 것같이 해주는 코드. syntactic sugar 일종.
// syntactic sugar : 기존 코드와 결합해 좀 더 간편한 api 제공. (예: class : prototype에 기반한 코드)
// 1. async
/*
function fetchUser() {
// do network request in 10 seconds...
return 'ellie';
}
const user = fetchUser(); // 호출
console.log(user); // ellie
*/
// Promise 상태 3가지: pedding, fulfilled, rejected
/*
function fetchUser() {
return new Promise((resolve, reject) => {
// do network request in 10 seconds...
// return 'ellie'; // Promise {<pending>}
resolve('ellie'); // Promise {<fulfilled>: "ellie"}
});
}
*/
// async 키워드 사용 시, Promise 사용 코드를 더 간단히 표현 가능.
async function fetchUser() {
// do network request in 10 seconds...
return 'ellie';
}
const user = fetchUser(); // 호출
user.then(console.log); // ellie (코드 의미: user가 들어오면, 콘솔로그에 출력)
console.log(user); // Promise {<fulfilled>: "ellie"}
// 2. await
/***********************
* 에러 처리 없는 경우
***********************/
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function getApple() {
await delay(2000);
return '사과';
}
async function getBanana() {
await delay(1000);
return '바나나';
}
/*
// 위 getBanana() 함수를 아래처럼 chaining해서 표현 가능하나, 비권장.
function getBanana() {
return delay(1000)
.then(() => '바나나');
}
*/
/*
// apple과 banana를 둘 다 출력하기.
function pickFruits() {
return getApple() // getApple() 호출해서
.then((apple) => {
// apple이 받아와지면
return getBanana() // getBanana() 반환할건데
.then((banana) => `${apple} + ${banana}`); // banana 받아와지면, apple과 banana 묶어줌.
});
}
// 위 코드는 콜백지옥과 유사한 프라미스 지옥. ㅡㅡ;
// async・await 사용해 아래처럼 간단하게 표현 가능. 단, 순차 실행이라 시간이 오래 걸림.
// 저 아래에서 병렬적으로 더 빠르게 실행하는 코드 소개.
*/
async function pickFruits() {
const apple = await getApple(); // getApple() 다 받아오면 apple에 담기. (2초 소요.)
const banana = await getBanana(); // getBanana() 다 받아오면 banana에 담기 (추가로, 1초 소요)
return `${apple} + ${banana}`; // 다 받아온 apple과 banana를 묶어 반환.
}
// pickFruits().then(console.log);
/***********************
* 에러 처리 있는 경우
***********************/
/*
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function getApple() {
await delay(2000);
throw 'error';
return '사과';
}
async function getBanana() {
await delay(1000);
return '바나나';
}
async function pickFruits() {
try {
const apple = await getApple(); // 2초 소요
const banana = await getBanana(); // 추가로 1초 소요
} catch (error) {
return 'error';
}
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
*/
// 위 코드는 순차적 실행으로 인해 시간이 오래 소요.
// 서로 무관 시, 병렬 처리하면 실행 시간을 단축 가능.
// 4. await 병렬 처리
async function pickFruits() {
const applePromise = getApple(); // 바로 실행되어 2초 후 실행.
const bananaPromise = getBanana(); // 위 코드와 병렬적으로 실행.
const apple = await applePromise;
const banana = await bananaPromise;
return `${apple} + ${banana}`;
}
pickFruits().then(console.log); // 사과 + 바나나
// 위 코드를 아래처럼 Promise.all API 이용해 더 간단히 표현 가능.
// 3. Useful APIs
// Promise.all
function pickAllFruits() {
return Promise.all([getApple(), getBanana()]).then((fruits) =>
fruits.join(' + ')
);
}
pickAllFruits().then(console.log); // 사과 + 바나나
/*
// 위 함수를 아래처럼 표현도 가능. (동영상 강의엔 없는 내용)
async function pickAllFruits() {
let fruits = await Promise.all([getApple(), getBanana()]);
return fruits.join(' + ');
}
pickAllFruits().then(console.log); // 사과 + 바나나
*/
// Promise.race
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log); // 바나나
/***************************************************
* async, await : promise를 간단하게 표현 위한 도구.
* all, race : Promise 객체에 속하는 유용한 API
**************************************************/
// Homework :
// callback-to-promise.js 파일의 콜백지옥 해결 promise 코드를 async, await 이용해 간결히 표현하기
최신댓글