JS | async 와 await

promise들을 여러가지고 chaining을 할 수 있다.
promise.. then.. promise.. then..
async 와 always를 사용하면 동기식으로 코드를 순서대로 작동하는 것처럼 간편하게 작성 할 수 있다. 기존에 존재하는 promise 위에 간편하게 api를 제공한다.

syntatic sugar

기존에 존재하는 거 위에 기존에 존재하는 것을 감싸서 더욱 간편하게 사용할 수 있는 api를 제공하는 것을 syntatic sugar 라고 한다.
class 또한 prototype을 base로 그 위에 살짝 덧붙여진 syntatic sugar이다.

async & await

깔금하게 promise를 사용할 수 있는 방법
무조건 promise를 async와 await으로 대체해서 사용해야하는 것은 아니다.

1. async

function fetchUser() {            //사용자의 data를 backend에서 받아오는 함수
// do network request in 10 secs...
 (네트워크 통신을 해서 back-end에서 data를 받아오는데 10초정도 걸리는 코드가 있다고 가정)
    return 'ellie';
}

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

위 코드에서 fetchUser() function 처럼 작동하는데 오래 걸리는 코드를 비동기적으로 처리하지 않으면 JS 엔진은 동기적으로 코드를 수행한다.

async 사용 전 promise를 사용하기

function fetchUser() {
    return new Promise((resolve, reject) => {
        //do network request in 10 secs..
        resolve('ellie');
    });
}
// 이렇게 작성하면 fetchUser function은 promise를 return 한다.
// 따라서 user 변수에 then을 사용하여 callback 함수를 등록할 수 있다. 

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

👇

# promise를 사용하지 않고 간편하게 비동기를 작성할 수 있는 방법
async function fetchUser() {
       retrun 'ellie';
}

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

함수 앞에 async keyword를 붙이면 promise를 쓰지 않아도 자동적으로 함수 내부의 블럭들이 promise로 변환되어 진다.

2. await

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
    await delay(3000);
    return '🍎';
}

async function getBanana() {
    await delay(3000);
    return '🍌';
}

await keyword는 async가 붙은 함수 안에서만 쓸 수 있다.
await keyword는 뒤에 붙은 함수가 끝날때까지 해당 함수의 실행을 기다려준다.

await을 쓰지 않는다면?

아래 코드처럼 chaining이 필요하다.

function getBanana() {
    return delay(3000);
    .then(() => '🍌');
}

Ex) 사과와 바나나를 한번에 따오는 함수를 생성

1. promise chaining
function pickFruits() {
    return getApple()
    .then(apple => {
        getBanana()
        .then(banana => `${apple} + ${banana}`);
    });
}
pickFruits().then(console.log);

👇

2. async 
async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}

pickFuirts().then(console.log);

3. await 병렬처리

async function pickFruits() {
    const applePromise = getApple();    //promise를 만드는 순간 바로 실행된다. 
        const bananaPromise = getBanana();

    const apple = await applePromise;
        const banana = await bananaPromise;
        return `${apple} + ${banana}`;
}

2가지 promise가 서로 영향을 주지 않아 병렬적으로 실행할 수 있는 경우에는 위와 같이 쓸 수 있는데 promise에서 제공하는 api를 사용하면 더 간단하게 할 수 있다.

3. useful Promise APIs => Promise의 all API
function pickAllFruits() {
    return Promise.all([getApple(), getBanana()] );
        //promise 배열을 전달하면 모든 promise들이 병렬적으로 다 받을 때까지 모아주는 것.
        then(fruits => fruits.join(' + ');
}
pickAllFruits().then(console.log);

추가적으로 race api는 2가지 promise 중에 먼저 실행되는 promise만 실행시킨다.