js async & await

간단 사용법 작성

 

예시 케이스

:  a라는 함수에는 setTimeout이 걸려있고, a함수가 끝난 후 b함수를 실행하고싶다.

 

첫번째 작성 코드

const a = async () => {
    setTimeout(()=>{
        console.log('aa');
    },5000)
}

const b = () => {
    console.log('bb');
};

const c = async () => {
    await a();
    b();
}

 

a함수에 async가 달려있어 promise를 반환해주는 것은 맞다.

허나, 이는 a함수의 실행완료 시점을 보장해주진 않는다.

그보단 단순실행시점을 보장해준다고 보면 됨

 

쉽게 말하면 a함수를 실행하며 setTimeout을

호출한 것 만으로 promise가 반환됨

>> "난 실행요청했으니 그냥 promise 반환한다?"

>> setTimeout에 기재된 5초를 기다린 후 결과를 반환할때  promise를 반환해주지 않음

 

따라서 실행순서는

a함수 실행 > setTimeout 실행 > b함수실행 > b함수완료 > ... >... >... 5초지난후 실행중이던 스택 수행 후 'aa' 출력

원하는 동작방식과는 다르다.

 

promise를 a함수 setTimeout시작과 함께 반환하는 것이 아닌 5초후에 수행하려면,

setTimeout 문장안에 promise를 반환하도록 수정해야한다.

 

const a = () => {
    return new Promise((resolve) => {
        setTimeout(()=>{
            console.log('aa');
            resolve();
        },5000)
    })
}
const b = () => {
    console.log('bb');
};

const c = async () => {
    await a();
    b();
}