async result paths

Callback, Promise, async/await는 성공과 실패가 갈라지는 위치가 다르다

세 문법은 같은 비동기 작업을 표현하지만 결과와 오류를 읽는 위치가 달라 디버깅 흐름도 달라진다.

Callback/Promise callback(err, data)then/catch체인과 중첩 확인

async/await await resulttry/catch순서 중심으로 읽기

방식

성공 위치

실패 위치

callback

두 번째 인자

첫 번째 인자

Promise

then

catch

async/await

await 다음 줄

catch 블록

React UI

data state

error state

핵심 비동기 문법 비교의 핵심은 결과가 어디서 들어오고 실패가 어디로 빠지는지다.