Async/Await

Promise vs async/awiat

async/await이 나오기 이전에는 Promise로 비동기 처리를 하였다. Promise는 콜백 지옥을 탈출하기 위해 만들어진 문법이다. 하지만 이런 Promise도 Promise 지옥을 만들었고 사람들은 더욱 간편한 코드를 원하였다. 이러한 이유로 es8에서 async/await이 등장한 것이다.

다음은 Promise와 async/await에 차이다.

const funcP = (x) =>{
    return new Promise((resolve, reject) =>{
        setTimeout(_ => {
            console.log(x)
            resolve(x)
        }, 1000)
    })
}

//프로미스
const promiseFunc = () => {
    let x = 0
    for(let i = 1, pending = Promise.resolve(); i <= 10; i++) {
        pending = pending.then(_ => funcP(i))
    }
}

promiseFunc()

//async/await
const asyncFunc = async () => {
    for(let i = 1; i <= 10; i++) {
        await funcP(i)
    }
}

asyncFunc()

한눈에 봐도 async/await이 Promise보다 단순하다는 것을 알 수 있다.

---

async/await와 Promise의 관계

async/await은 항상 Promise와 연관지어서 생각해야 한다. async는 특정 함수를 async/await으로 지정하는 키워드이고 await은 async 함수 내부에서 비동기로 실행될 부분에 지정하는 키워드이다. 항상 주의할 점은 await으로 지정하는 함수는 return값이 Promise 객체여야 한다는 것이다.

다음은 async/await을 간단한 형식으로 나타낸 것이다.

const funcP = () => {
    return new Promise(.....)
}

const asyncFunc = async () => { //async로 함수를 설정
    await funcP() //await으로 Promise객체를 반환하는 함수 실행
}

또한 우리는 async/await와 Promise를 섞어서 사용할 수도 있다. await으로 함수를 실행하면 Promise객체를 반환한다는 점을 이용하면 된다.

다음은 async/await과 Promise를 동시에 이용한 예이다.

const funcP = (x) => {
    return new Promise(resolve => {
        console.log(x)
        resolve(x)
    })
}

const asyncFunc = async () => {
    await funcP(1)
    await funcP(2).then(x => {
        console.log(x + 10)
    })
}

asyncFunc()

---

async 함수 내부에 async 다루기

이번에는 async 내부에 async가 어떻게 동작하는지 알아보자

다음 예제를 보자

const foo = (x, y) => {
    return new Promise(resolve => {
        setTimeout(_ =>{
            console.log(x)
            resolve(x)
        }, y * 1000)
    })
}

const test = async () => {
    const go1 = async () => {
        await foo(1, 3)
    }
    go1()
    await foo(2, 1)
    await foo(3, 4)
}

test()

다음의 결과를 보면 비동기 처리가 내가 원하는 순서가 아닌 go1()과 foo(2, 1)이 경쟁을 통하여 빨리 끝나는 것이 먼저 실행 된다는 것을 알 수 있다. 하지만 foo(2, 1)과 foo(3, 4)는 내가 지정한 순서대로 실행 된다는 것을 알 수 있다. 결과적으로 같은 async 블록 안에 묶인 await은 동시에 실행 되지만 다른 async 블록 안에 묶인 await은 서로 경쟁한다는 것이다.

---

출처

victolee

stackoverflow