async/await

async/await는 promise를 좀 더 쉽고 편하게 사용할 수 있게 만들어주는 ES8 문법이다

우선 함수를 하나 구현해 보자

function increase(number){
    const promise = new Promise((resolve, reject) => {
        setTimeout(()=>{
            const result = number +10;
            if(result>50){
                const e = new Error('TooBig');
                return reject(e);
            }
            resolve(result);
        },1000);
    });
    return promise;
}

1초 뒤 10을 더해서 반환하고 10을 더한 수가 50보다 크면 에러를 반환한다는

promise

이전에 한 번 다루었으니 간단하게 설명하면 promise는 생성될 때 resolve와 reject를 가진 excutor라는 함수를 실행하고

그 함수의 실행이 끝나면 reslove나 recject중 하나를 무조건 반환해야한다

위의 promise는 result가 50보다 크면 reject에 e라는 에러를, 그보다 작으면 resolve에 result를 담은 promise를 반환하고 있다

이 promise를 사용하기 위해서는 then이라는 메서드를 쓰면되는데

then 메서드는 promise의 결과가 resolve라면 첫 번째 콜백 함수를, reject라면 두 번째 콜백 함수를 실행시킨다

increase(0).then(number=> {
    console.log(number);
    return increase(number);
}).then(number=>{
        console.log(number);
        return increase(number);
    })
    .then(number=>{
        console.log(number);
        return increase(number);
    })
    .then(number=>{
        console.log(number);
        return increase(number);
    })
    .then(number=> {
        console.log(number);
        return increase(number)
    }).then(number=> {
    console.log(number);
    return increase(number);
});

위의 예제에서는 then이 두 번째 콜백, 즉 reject를 위한 함수를 선언해주지 않았기 때문에

순서대로 결과를 출력하다가 50이 넘어가서 에러를 뱉는다

async/await

async는 함수 앞에 붙고 async가 붙은 함수의 리턴값은 무조건 promise가 된다 만약 promise를 반환하는 함수라면 promise로 두번 감싸지는 않고 그냥 promise다

await는 async가 붙은 함수 안의 promise 앞에 붙여서 사용한다

await가 붙은 promise는 promise가 처리될 때 까지 기다렸다가 반환된다

(async ()=>{
    try {
        let result = await increase(0);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
    }catch (e){
        console.log(e);
    }
})();

await는 async함수 안에서만 실행될 수 있기 때문에 async로 만든 즉시 실행 함수로 감싸준 다음

reject의 반환은 try...catch로 잡아주었다