JS 비동기 async 함수, await

async

해당 async를 사용하면 함수를 비동기 함수로 언선해준다.

이는 곧 함수를 자동으로 promise로 반환해준다.

async function hello() {

}

const sing = async () => {
    return 'LA LA LA LA'
} // 출력값 Promise {<fulfilled>: 'LA LA LA LA'}

sing().then((data) => {
    console.log("PROMISE RESOLVED WITH:", data)
}) // 출력값 PROMISE RESOLVED WITH: LA LA LA LA

이 함수는 async를 사용하지 않았다면 undefined가 출력되었겠지만, async를 사용해서

Promise {<fulfilled>: undefined} 값이 나온다. ( 원래는 return new Promise를 선언해야함 )

 

const sing = async () => {
    throw new Error("UH OH")
    return 'LA LA LA LA'
} // 출력값 Promise {<rejected>: ReferenceError: asdlkfjalskd is not defined

async는 함수에 에러가 뜨면 Promise를 rejected 시킨다.

 

await

await 함수는 async 와 함께 사용된다. 

의미는 해당 async 함수가 실행될때까지 기다려주는 역할을 해준다.

const delayedColorChange = (color, delay) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            document.body.style.backgroundColor = color;
            resolve();
        }, delay)
    })
}

위 처럼 색을 바꿔주는 promise 함수가 있을때

delayedColorChange('red', 1000)
    .then(() => delayedColorChange('orange', 1000))
    .then(() => delayedColorChange('blue', 1000))
    .then(() => delayedColorChange('green', 1000))
    .then(() => delayedColorChange('peel', 1000))
    .then(() => delayedColorChange('indigo', 1000))
    .then(() => delayedColorChange('yellow', 1000))

async function rainbow() {
    await delayedColorChange('orange', 1000)
    await delayedColorChange('green', 1000)
    await delayedColorChange('indigo', 1000)
    await delayedColorChange('peel', 1000)
    await delayedColorChange('yellow', 1000)
    return "ALL DONE!"
}

두 코드는 출력이 같다 ( 밑의 async function은 따로 실행을 해줘야 한다. )

만약 밑의 코드가 await가 없었다면 다른 함수들이 기다리지 않아 눈에 보이는 출력값은 yellow만 나오게 된다.

 

rainbow().then(() => console.log("END OF RAINBOW!"))

async function printRainbow() {
    await rainbow();
    console.log("END OF RAINBOW!")
}
printRainbow

위의 코드도 출력값은 같다.

async function makeTwoRequests() {
    let data1 = await fakeRequest('/page1');
    console.log(data1)
}

또한 이처럼 기다려준 함수값을 변수로 저장하여 출력도 가능하다.