[JS/TS] Promise와 async/await

[참조] 동기 / 비동기

Promise

정의

• 비동기 함수의 결과를 담고 있는 객체
• 동기적으로 순서대로 불러야 하는 코드가 있을 때, 사용하는 함수
• 계속 호출하면 코드가 복잡해지고 에러 처리가 어려워지는 콜백의 단점을 보완함

세 개의 상태

1. Pending: 비동기 함수가 시작하지 않은 상태
2. Fulfilled: 비동기 함수가 성공적으로 완료된 상태
3. Rejected: 비동기 함수가 실패한 상태

Promise가 대기 상태에서 상태가 바뀌면 then(), catch() 함수를 사용하여 각각 성공과 실패 Promise를 처리할 수 있다.

하지만, then() 체인을 길게 이어나가면 콜백과 마찬가지로 가독성이 떨어지고 에러 파악이 어려워진다.

---

async/await

async 정의

• 함수 앞에 붙여 비동기 함수임을 명시한다.
• 항상 Promise 객체를 반환한다.

await 정의

• Promise가 처리(resolved 또는 rejected)될 때 까지 실행을 중단한다.
• await은 async 함수 내부에서만 사용할 수 있다.
• await은 Promise 성공 시 결과 값을 반환하고, 실패하면 예외를 발생한다.

장점

1. 비동기 흐름을 동기 코드처럼 읽을 수 있어 가독성이 좋다.
2. try-catch문을 통한 간단한 예외 처리
3. Promise 체인처럼 then()을 체이닝 하지 않아도 된다.