Async / await

저번에는 Promise에 대해 공부를 해봤다면 이번에는 좀 더 편하게 처리를 할 수 있는 async/await에 대해 공부해봤다.

우선 Promise를 통해 적어본다면

fucntion user(){
    return new Promise((resolve,reject)=> {
        resolve('Hello')
    })
}
const result = user()
result.then(console.log)

// 'Hello' 출력

이렇게 될 것이다. 하지만 이보다 더 편하게 할 수 있는 방법이 있는데 그것은 함수앞에 async를 적어주는 것이다.

async fucntion user(){
    return 'Hello'
}
const result = user()
result.then(console.log)

// 'Hello' 출력

이렇게만 비교해봐도 가독성면이나 이해하기가 엄청 쉽다는게 느껴진다.

아래에는 비동기처리를 하고 있는 delay함수를 만들어 예시를 들어보겠다.

function delay(ms) {
    return new Promise((resolve,reject) => {
        setTimeout(resolve,ms) // ms(시간)에 따라 데이터반환
    })    
}


async function getName(){
    await delay(2000) // 2초뒤 리턴
    return '홍길동'
}

async function getAge() {
    await delay(1000) // 1초뒤 리턴
    return 20
}

이렇게 일정시간뒤에 데이터를 반환하게되는 delay함수가 있는데, 이름을 가지고 오는 함수에서는 2초뒤에 이름을 리턴하고
나이를 가지고오는 함수에서는 1초뒤에 20 을 리턴하게 된다.
그리고 이 모든것을 합쳐서 이름과 나이를 가진 사람의 함수가 있는데 Promise로 적는다면 아래와 같을 것이다.

fucntion getPeople(){
    return getName().then(name => {
        return getAge().then(age => `이름:${name} + 나이:${age}`)
    })
}
    getPeople().then(console.log)  // 이름:홍길동 + 나이:20

이렇게 적는다면 한눈에 보기에도 어렵고 함수가 많이 있다는 가정을 하게된다면...많은 콜백함수를 사용하여서 콜백지옥을 경험할 수도 있을 것이다.
이렇게되면 가독성 뿐만 아니라 유지보수에도 좋지않기때문에 상당히 비효율적인것 처럼 보인다.
여기서 사용할 수 있는게 async/await 이다.

async function getPeople(){
    const name = await getName()
    const age = await getAge()
    return `이름:${name} + 나이:${age}`
}
    getPeople().then(console.log) // 이름:홍길동 + 나이:20

이렇게 async/await으로 한다면 한눈에봐도 코드가 간결하게되어 이해하기 쉽고 명확하다.
이외에도 병렬로 처리를 할 때는 Promise.All 이라는 함수도 있고,
비동기처리중 가장 먼저 처리되는것을 반환한다면 Promise.race 라는 함수도 있다.

위의 함수들의 사용법은 아래와 같으며 마무리한다.

function exe(){
    return Promise.All([getName(),getAge()]) // 비동기 병렬처리
    return Promise.race([getName(),getAge()]) // 제일 먼저 처리되는 것 -> 위의 기준으로는 age가 될것임
}