TIL : Promise & Async (1)

1. 동기 vs 비동기

· 동기(Synchronous) : 요청을 보낸 후 응답을 받아야 다음 동작이 이루어진다.

· 비동기(Asynchronous) : 요청을 보낸 후 응답과 상관없이 다음 동작이 이루어진다.

 

왼쪽 : 동기 / 오른쪽 : 비동기

---

2. Callback

비동기 처리 방식으로는 출력값이 반드시 순서대로 나오지 않는다. 그러나, 순서를 꼭 지정해 주어야 하는 경우가 있는데 이런 경우를 위해 콜백 함수를 사용한다. 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.

 

---

3. Callback Hell

콜백 함수를 쓰다 보면 콜백 지옥에 빠질 수 있다. 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 이런 콜백 지옥을 해결하기 위해 사용하는 것이 Promise나 Async이다.

 

콜백 지옥

---

4. Promise

1. 프로미스는 new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

· 대기(pending) : 이행하거나 거부되지 않은 초기 상태

· 이행(fulfilled) : 연산이 성공적으로 완료된 상태

· 거부(rejected) : 연산이 실패한 상태

 

2. Promise Chaining : 여러 개의 프로미스를 .then()으로 연결하여 처리할 수 있다.

 

3. new Promise()로 프로미스를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다. 이때, 이행 상태일 때 then()을 이용해 처리 결과값을 받을 수 있고, 거부 상태일 때 catch()로 받을 수 있다.

 

프로미스 처리 흐름 - mdn

 

4. 프로미스의 에러 처리 방법

· then()의 두 번째 인자로 처리

getData().then(
 handleSuccess,
 handleError
);

· catch() 이용

getData().then().catch();

---

5. Async & Await

await 키워드는 promise 타입을 리턴할 때 사용한다. 함수명 앞에 async을 붙여야 await을 사용할 수 있다.

async function 함수명() {
  await 비동기_처리_메서드명();
}