JS async,await 입문!

출처. https://www.youtube.com/watch?v=aoQSOZfz3vQ 

드디어 입문의 마지막이다.

동기와 비동기. 멀티스레딩이 아닌 곳에서 유용하게 쓰이는 만큼 어렵다.

callback -> promise -> async, await으로 이어지는 전개가 좋았다.

'use strict';

const { reject } = require("async");

// async & await
// clear style of using promise :)

// 1. async
// function fetchUser에 들어와서 10초 동안 처리를 기다리고 그 다음 일을 수행하게 된다.
function fetchUser() {
    // do network request in 10 secs...
    return 'CJM';
}

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

// 앞의 비효율적인 처리를 위해 Promise를 배웠었다.
function fetchUser() {
    return new Promise((resolve, reject) => {
        // do network request in 10 secs...
        resolve('CJM');
    });
}

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

// 함수 안의 코드를 Promise로 바꿔주는 async
async function fetchUser() {
    // do network request in 10 secs...
    return 'CJM';
}
const user = fetchUser();
user.then(console.log);
console.log(user);

// 2. await 기다려!
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
    // async 함수 안에서만 실행할 수 있다.
    // await이 끝날 때까지 기다려준다.
    await delay(1000);    
    return 'apple';
}

async function getBanana() {
    await delay(1000);    
    return 'Banana';
}

// Callback 지옥이 떠오른다!!
function pickFruits() {
    return getApple()
    .then(apple => {
        return getBanana().then(banana => `${apple} + ${banana}`);
    });
}

// 해결법 1 but apple과 banana는 독립적인데 await를 순서대로 하면 apple을 banana가 기다림
async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}

// 해결법 2 but 더러움
async function pickFruits() {
    const applePromise = getApple();
    const bananaPromise = getBanana();
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

// 해결법 3 Useful Promise APIs
function pickAllFruits() {
    // Promise.all()안에 배열 형태로 주면 다 받을때까지 기다린다.
    return Promise.all([getApple(), getBanana()]).then(fruits => 
        fruits.join(' + ')
    );
}

// pickFruits().then(console.log);
pickAllFruits().then(console.log);

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

pickOnlyOne().then(console.log);

까먹지 말자!!!

1. async, await가 있다고 Promise는 안 좋은게 아니라 Promise를 편하게 쓸 수 있게 async, await을 쓰는 것이다.

2. 독립적으로 비동기를 실행하는게 있다면 Promise.all([])을 사용해서 편하게 쓸 수 있다.

3. 제일 빠른 것을 고르고 싶다면 Promise.race([])

4. async가 붙은 함수를 불러낼때 (ex. pickAllFruits().then();) 이런 식으로 함수호출.then()을 써야 한다.