비동기 통신과 Promise
자바스크립트 제어 흐름
자바스크립트 비동기 이해하기
- 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리
- 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프 등의 개념을 알아야함
자바스크립트 엔진
- 엔진은 하나의 메인 스레드로 구성된다.
- 메인 스레드는 코드를 읽어 한 줄씩 실행한다.
- 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다.
동기적 제어 흐름
- 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다.
- 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다.
- 코드의 흐름과 실제 제어 흐름이 동일하다.
- 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.
비동기적 제어 흐름
- 비동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 의미한다.
- 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다.
- 코드 흐름과 실제 제어 흐름이 다르다.
- 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.
let a = 10 --> console.log('Finished') --> setTimeout 순으로 실행
동기 vs 비동기
이러면 많은 사용자의 요청을 처리하기 어려움
코드를 읽는 것은 수월
이벤트 루프
자바스크립트 비동기
- 자바스크립트 엔진은 비동기 처리를 제공하지 않는다.
- 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다.
- 이 함수들을 API라 한다.
- 비동기 API의 예시로, setTimeout, XMLHttpRequest, fetch 등의 Web API가 잇다.
- node.js의 경우 파일 처리 API, 암호화 API 등을 제공한다.
비동기 코드 예시
비동기 처리 모델
- 메인 스레드 안에 Call stack이 있는게 아닌 메인 스레드가 Call stack을 이용해 코드르 읽고 실행
- 비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있다.
- 이벤트 루프, 태스크 큐, 잡 큐 등으로 구성된다.
- API 모듈은 비동기 요청을 처리 후 태스크 큐에 콜백 함수를 넣는다.
- 자바스크립트 엔진은 콜 스택이 비워지면, 태스크 큐의 콜백 함수를 실행한다.
비동기 처리 예시
이벤트 루프 정리 추가
-
이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을 태스크 큐에 전달하고, 태스트 큐에 담겨있는 콜백 함수들을 콜스택에 넘겨준다.
-
이벤트 루프가 태스트 큐에서 콜스택으로 콜백 함수를 넘겨주는 작업은 콜스택에 쌓여있는 함수가 없을 때만 수행된다.
-
태스크 큐에서는 web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간이다. 이벤트 루프가 정해준 순서대로 줄을 서있으며, FIFO방식을 따른다.
-
태스크 큐는 하나의 큐로 이루어져 있지 않는다. Microtask Queue, Animation Frames 등 여러개의 큐로 이루어져 있다.
-
Web API는 브라우저에서 자체 지원하는 api이다. Web API는 DOM이벤트, AJAX, setTimeout등의 비동기 작업등을 수행할 수 있도록 api를 지원한다.
출처: https://zereight.tistory.com/855 [Zereight's Blog]
Promise
Promise API
- Promise API는 비동기 API 중 하나이다.
- 태스크 큐가 아닌 잡큐(Job queue, 혹은 microtask queue)를 사용한다.
- 잡 큐는 태스크 큐보다 우선순위가 높다.
Promise의 처리가 SetTimeout보다 앞선다
Promise
- 비동기 작업을 표현하는 자바스크립트 객체.
- 비동기 작업의 진행, 성공, 실패 상태를 표현한다.
- 비동기 처리의 순서를 표현할 수 있다.
Promise 생성자
Promise API를 사용하면 비동기 처리에 대한 성공 혹으 실패를 조작할 수 있다.
Promise 메서드
Promise 메서드 체인
메서드가 줄줄이 이어짐
Promise.resolve, Promise.reject
Promise.all
**
- fetch는 return값이 promise다.
- return값이 promise면 then을 호출하면 된다.
- then에는 함수를 넣어준다.
- 그 함수는 이 작업이 성공했을 때 호출될 것이다.
- 그 함수의 첫번째 parameter에는 데이터가 들어가있다.
- then은 두 개의 parameter가 있다. 첫 번째는 성공했을 때, 두 번째는 실패했을 때 실행될 것이다.
- 두 번째 함수의 첫번째 파라미터에는 실패한 이유가 들어있을 것이다.
