[Javascript] 비동기 처리

 

Javascript를 공부하다보면 비동기 처리에 대해 배우게 되는데, 이부분에 대해 정리해보려고 한다.

 

 

 

 

 

 

1. 콜백 함수(Callback Function)

---

가장 일반적인 비동기 요청 결과를 처리하는 방법이다. 대표적인 예로는 HTTP 요청에 따른 응답 처리가 있다.

Callback Function 예제

 

일반적으로 비동기 요청이 한 개인 경우에는 콜백 함수를 쓰는 것이 가장 편리하다. 하지만 실제로 개발을 하다보면, 여러 개의 비동기 요청을 처리해야할 때가 있다. 이럴 때, 계속해서 콜백함수를 쓰게되면 아래와 같이 콜백 헬(Callback Hell)이 발생한다.

 

위 예제를 보면, 콜백 함수와 if/else 문들이 여러 개 사용되어서 코드 가독성이 좋지 않다. 이런 경우, 나중에 유지보수를 할 때 매우 불편하다. 잘못 건드리면 모든 호출이 다 망가질 수 있다.

 

 

 

 

 

 

 

2. Promise

---

콜백 함수의 단점(콜백 헬)을 해결하기 위해 나타난 것이 바로 Promise 이다. 여기서는 Promise에 대해 간단히 설명할 예정이다. 보다 자세한 설명은 아래 링크에 정리해두었다.

https://gogomalibu.tistory.com/72?category=748783

[ES6] Promise에 대하여

 

Promise는 ES6에서 제한된 객체로, 콜백 헬의 특징인 중첩 스코프를 대신해서 나열식으로 비동기 요청 결과를 처리한다.

Promise의 가장 기본적인 사용 방법은 아래와 같다.

Promise에는 3가지 상태가 존재한다.

- 대기 : Promise가 실행되고 값이 결정되지 않은 상태

- 충족 : 대기 상태가 끝나고 값이 결정된 상태(resolve). resolve() 함수를 호출하면 then() 메서드를 호출한다.

- 거부 : Promise가 제대로 처리되지 않고 거부된 상태(reject). reject() 함수를 호출하면 catch() 메서드를 호출한다.

 

 

 

 

 

3. Observable/Observer

---

Observable/Observer는 반응형 프로그래밍의 대표적인 예제이다. 반응형 프로그래밍은 웹 페이지에 들어오는 stream 형태의 입력 이벤트를 감지해서 반응을 처리하는 방법이다. 이에 대한 자세한 내용은 아래 페이지에 정리해두었다.

https://gogomalibu.tistory.com/131?category=851911

[Angular] Observable & Observer

 

 

 

 

 

 

 

4. async/await

---

여러 개의 비동기 요청을 순서대로 실행해야할 때는 어떻게 해야할까?

만약 비동기 요청 결과가 이어서 호출되는 비동기 요청에 영향을 미친다면?

여러 개의 비동기 요청을 순서대로 처리하는 방법에는 Promise.all() 과 aync/await이 있다.

 

 

 

(1) Promise.all()

Promise.all()

Promise.all()은 작업 완료 시점이 다르지만, 마치는 순서를 호출한 순서대로 출력해주는 역할을 한다.

위 그림을 살펴보면, 작업 완료 시점은 프로그램을 시작할 때마다 다르다. 하지만, 응답 순서는 작업1 -> 작업2 -> 작업3 -> 작업4 로 호출한 순서대로 응답한다.

 

 

 

 

 

(2) async/await 함수

async/await 함수

async/await 함수는 종료 시점도 호출 순서와 같다는 점에서 Promise.all() 함수와 차이가 있다. 이를 비동기 호출을 동기화한다고 한다.

비동기 호출을 동기화해야할 때는 언제일까?

비동기 호출은 한 작업이 다 끝나기 전에 다른 작업을 시작하는 방식으로 진행된다. 하지만 어떠한 비동기 요청 결과가 다음에 처리될 비동기 요청에 필요할 경우가 있다. 예를 들면, 사용자의 id를 가지고 사용자 정보 조회 API를 호출한 뒤, 그 호출한 값을 이용해 어떤 이벤트를 처리해야할 때가 있다. 이런 경우, 사용자 정보 조회 API 호출이 완전히 끝난 다음에 이벤트가 이뤄져야 하므로 async/await을 사용할 수 있다.

(일반적으론 한 이벤트만 처리하므로 콜백함수를 쓴다. 이는 이해를 위해 든 예시이다.)

 

 

 

 

 

 

참고 도서 : http://www.yes24.com/Product/Goods/59719961

타입스크립트 퀵스타트