[JS] 프로미스(Promise) (2) - async (feat. setTimeout)

async 함수는 기본적으로 Promise를 반환해.

쫄지마😁 그냥 이렇게 한 거야.

async function 비동기함수() {
}

비동기함수(); // Promise 반환됨 (상태: `fulfilled`, 결과: `undefined`)

Q. 만약 위 async 함수를 await와 함께 호출하면?
A. 반환되는 Promise의 상태가 이미 fulfilled이기 때문에 바로 결과 값인undefined가 튀어나와. 아래처럼.

async function 비동기함수() {
}

(async () => {
    const result = await 비동기함수();
    console.log(`result: ${result}`);
})();

// result: undefined

---

그렇다면,
Q. async 함수 안에서 setTimeout()을 호출해 보면?
그럼 반환되는 Promise의 상태가 pending으로 바뀔까?

async function 비동기함수() {
    setTimeout(
        () => console.log('2초 지났어'),
        2000
    );
}

비동기함수();

"안 바꿔 줘. 돌아가."

A. 안 바뀌어. 반환되는 Promise는 이전이랑 똑같아.
(당연히 2초 후 콘솔에 "2초 지났어"는 출력돼)

setTimeout()은 Web API다. setTimeout()이 호출되는 순간 전달한 callback은 어딘가로 이동하고 함께 전달한 시간 동안 그곳에 잠깐 머무른다. 그리고 나서 시간이 되면 큐(Queue)로 이동하고 이벤트 루프에 의해 차례가 오면 콜 스택으로 옮겨지고 실행된다.

어려운 설명은 넣어 두고,

setTimeout()에 전달한 callback은 자기대로 따로 놀아서 async 함수가 반환하는 Promise에 영향을 끼치지 않아.

Q. 아니 그럼 어떻게 해야 반환되는 Promise 상태가 먼저 pending이 되게 할 수 있는데?
A. ⭐️ 새로운 Promise를 return

아래처럼 일정 시간 후에 resolve되는(상태가 fulfilled로 바뀌는) Promise를 return해 보자.

async function 비동기함수() {
    return new Promise(resolve => {
        setTimeout(
            () => {
                console.log('2초 지났어');
                resolve('100억');
            },
            2_000
        );
    });
}

비동기함수();

자 이제 반환되는 Promise 상태가 pending이지?
2초 후에 resolve() 함수가 호출되면서 상태가 fulfilled로 바뀔 거야, 아래처럼, 100억이라는 결과 값과 함께.