Promise 갖고 놀아 보기

 

promise를 응용하여 로직을 하나 구현해보고자 한다!

일단 원하는 로직은 다음과 같다.

a가 콘솔에 먼저 찍히고 일정 시간 뒤에 b가 찍히는 로직을 만들고 싶은 상황

해당 로직을 구현하려면 다음과 같이 구현하면 된다.

const delay = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        },time * 1000);
    });
}

const run = async () => {
    console.log('a');
    try {
        await delay(3);
    } catch (err) {
        console.log('에러 발생');
        return;
    }
    console.log('b');
}

console.log(run());

로직을 설명하면 다음과 같다.

우선 a가 찍히고 나서 b가 찍힐 때까지 텀이 있어야 한다.

그렇기 때문에 일정시간이 지난 후 특정 코드가 실행되도록 하는 setTimeout 비동기 함수를 사용하였다.

하지만 setTimeOut 함수의 경우 비동기이기 때문에 a가 찍힌 뒤 바로 b가 찍히며 그 다음에 setTimeOut 안에 있는 로직이 실행완료가 될 수 있다.

그렇기 때문에 promise를 반환하는 함수를 만들고 promise를 반환하는 코드가 실행된 후 그 이후의 코드가 실행되도록 해주는 await 키워드를 delay 함수 앞에 추가하였다.

이 wait 키워드는 비동기 함수를 마치 동기로 실행되는 것과 같은 효과를 주는 것이라고 기억하면 된다.

물론 await키워드가 붙는 함수가 정상적으로 실행되려면 async 함수 안에 있어야 한다.

위와 같이 로직을 구현하면 delay함수는 promise를 반환하고 일정시간이 지난 뒤 (에러가 발생하지 않는 한) catch를 건너뛰고 b가 찍힌다.

단 await 키워드가 없을 경우 a,b가 먼저 호출되고 일정 시간 뒤에 promise를 반환한다.

한편 promise를 이용한 로직을 구현할 때 주의할 점이 몇가지 있다.

• promise 생성함수의 콜백함수에서 resolve나 reject 함수를 호출하지 않으면 delay함수 이후의 함수가 실행되지 않고 delay함수까지만 실행하고 끝난다.

여담으로 promise를 반환하는 함수에서 resolve()함수를 호출하는 것이 아닌 reject()를 호출하면 어떻게 될까?

const delay = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(); // resolve에서 reject로 변경
        },time * 1000);
    });
}

const run = async () => {
    console.log('a')
    try {
        await delay(3)
    } catch (err) {
        console.log('에러 발생');
        return;
    }
    console.log('b');
}

console.log(run());

그럴 경우 promise를 반환하고 일정 시간이 지난 뒤 catch로 가서 "에러 발생"이 찍힌 후 b가 찍히지 않고 로직이 종료된다.

단 await 키워드가 없을 경우 a,b가 바로 찍히고 일정 시간 뒤에 promise를 반환하고 UnhandledPromiseRejectionWarning 에러가 발생하여 catch로 가지 않는다.

 

즉 promise를 반환하는 함수를 try catch로 예외처리를 할 때 해당 promise를 반환하는 함수가 await라는 키워드가 없으면 예외처리를 할 수 없다는 것을 기억하자!