[JavaScript] Promise, Async & Await

<Promise>
1. Producer
2. Consumer: then, catch, finally
3. Promise chaining
4. Error handling
---------------
<Async & Await>
1. Async
2. Await
3. 유용한 Promise APIs

 

< Promise >

• promise는 비동기적으로 구현하는 자바스크립트 객체이다.
• state: pending -> fufilled or rejected
• Producer vs Consumer

 

1. Producer

// 1. Producer
// 새 promise가 만들어지면 executor라는 콜백함수가 자동으로 바로 실행됨
const promise = new Promise((resolve, reject) => {
    // doing some heavy work (network, read files)
    // 무거운 작업은 promise를 통해 비동기적으로 처리하는 것이 효과적
    console.log('doing something...');
    setTimeout(() => {
        resolve('wonju'); // 콜백함수 resolve
        // reject(new Error('no network'));
    }, 2000); 
});

 

 

2. Consumer: then, catch, finally

// 2. Consumer: then, catch, finally
// then : promise 함수가 정상적으로 동작했을 때 resolve의 값을 value로 받아옴
// catch : promise 함수가 reject 되었을 때 (then을 거쳐 catch를 통해) error 값을 받아옴
// finally : promise의 성공 여부에 관계없이 마지막에 항상 동작함
promise
    .then(value => {
        console.log(value);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => {console.log('finally');
});

 

 

3. Promise Chaining

// 3. Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num *2)
.then(num => num *3)
.then (num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num));

 

 

 

4. Error handling

// 4. Error Handling
const getHen = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('🐓'), 1000);
    });

const getEgg = hen =>
    new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
    });

const cook = egg =>
    new Promise((resolve, reject) => { 
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
})


getHen() // 축약 가능
    .then(getEgg)  //  .then(hen => getEgg(hen)) 
    .catch(error => {
        return '🥖';
    })
    .then(cook)  //  .then(egg => cook(egg)) 9
    .then(console.log)  //  .then(meal => console.log(meal))
    .catch(console.log);

 

 

 

 

 

< Async & Await >

 

• clear style of using promise
• new Promise 부분을 없애고 함수에 async 키워드를 붙인다.
• resolve(value); 대신 return value; 를 사용한다.
• reject(new Error(..)); 대신 throw new Error(..); 를 사용한다.

 

1. async

 

• promise를 이용할 경우

// 1. async
// promise를 이용할 경우
function fetchUser() {
    return new Promise((resolve, reject) => {
        // do network request in 10 secs...
        resolve('wonju');
    });
}

 

• async를 이용할 경우

//async를 이용할 경우
//async를 함수 앞에 적으면 promise를 사용하는 것과 같음

async function fetchUser() {
    //do network request in 10 secs...
    return 'wonju';
}

 

• 사용

const user = fetchUser();
user.then(console.log);
console.log(user);

 

 

2. await

await: promise가 끝날 때까지 기다려라.

// 2. 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 '🍌';
}

 

• await이 없는 경우

function pickFruite() {
    return getApple()
    .then(apple => {
        return getBanana()
        .then(banana => `${apple} + ${banana}`);
    });
}

 

• await을 이용하는 경우

async function pickFruite() { 
    const applePromise = getApple();  // 병렬 처리 (동시 수행 => 총 1초 소요)
    const bananaPromise = getBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

pickFruite().then(console.log);

 

 

3. 유용한 promise의 APIs

• promise.all: 여러 비동기 동작을 한꺼번에 수행하기

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

 

• promise.race: iterable안에 있는 프로미스 중 가장 먼저 완료된 것을 반환한다.

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

pickOnlyOne(). then(console.log);