[JS] async & await

---

알고있으면 좋은 Javascript Tip✨

---

async & await

• 가장 최근에 나온 비동기 처리 패턴으로, 기존의 콜백함수와 프로미스의 단점을 보완한 문법이다.

(1) async 와 await의 사용법은?

• 함수앞에 async를 붙이면 해당 함수는 자동으로 프로미스를 반환하게 된다.
• 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날때까지 기다린다. (동기식으로 처리)
• await은 async가 붙은 함수 안에서만 사용 가능하다.

(2) async 와 await의 진행 방식은?

• async을 포함한 함수는 프로미스 객체가 반환되고 async 함수의 return 값은 프로미스의 resolve(성공)값이 된다.
• async/await는 따로 에러 핸들링 기능이 없어 try-catch()문을 활용해야 한다.

(1) 기존 프로미스(Promise) 방식
function promiseFunc() {
    return new Promise((resolve, reject) => {
        resolve('Promise is test')
    })
}

// Promise is test
promiseFunc().then(console.log)


(2) async & await 방식
async function asyncFunc() {
    return 'Async is test'
}

// Async is test
asyncFunc().then(console.log)

• async 함수에서 return 값은 resolve()와 같은 역할을 한다.
• 문자열을 반환하는 것처럼 보이지만 실제로는 프로미스(Promise)를 반환한다.

(3) async 와 await의 예외 처리는?

• 함수 내부에서 동기적으로 처리할 수 있기 때문에 try-catch 구문을 사용 예외 처리를 할 수 있다.
• 물론 모든 예외를 try-catch 구문으로 처리하는 것은 아니다.
• await은 async가 붙은 함수 내에서만 사용 가능하기 때문에 최종결과나 처리되지 못한 에러의 경우 catch() 메서드를 사용해 처리해 주곤 한다.

(1) try-catch 구문을 이용한 예외 처리 방법
async function promise() {
    throw 'rejected';
}

async function exceptionFunc() {
    try {
        await promise()
    } catch (error) {
        console.log('catch error!', error)
    }
}

// catch error! rejected
exceptionFunc()