Promise ?
비동기 처리를 도와주는 객체
Sync vs Async
동기프로그래밍은 조건문이나 함수호출이 따로 없다면, 코드는 위에서 아래로 연속적으로 실행된다. 네트워크 요청 및 디스크 I/O와 같은 시간 소요가 많은 태스크의 경우 blocking 처리 된다.
비동기 프로그래밍의 경우 엔진이 이벤트 루프 안에서 실행이 되는것을 의미한다.
blocking 연산이 필요할 때 요청은 시작되고, blocking의 처리의 결과와 상관없이 다른 코드들은 실행된다.
응답이 준비되면, 컨트롤 flow가 지속되는 경우 이벤트 핸들러를 실행시키기 위한 인터럽트가 실행된다.
이러한 방식으로 싱글 스레드가 많은 연산을 동시에 처리 할 수 있다.
UI는 본질적으로 비동기적이며, 이벤트루프를 interrupt하고 이벤트핸들러를 트리거하기 위해 대부분의 시간을 사용자 인풋을 기다리는데 사용한다.
노드 또한 기본적으로 비동기적이다. 서버의 작동은 대부분 위와 같은 방식으로 진행된다. 네트워크 요청을 루프 안에서 기다리고, 한가지 태스크를 처리하는 동안 더 많은 요청들을 받아들인다.
blocking?
어떤 시스템 콜을 호출하면 시스템 동작이 완료할때까지 시스템 콜에서 프로세스가 멈추게 되는것
js는 기본적으로 non-blocking
예외 : alert function -> console과 같이 입력한다면 alert창이 확인된 이후에 console을 확인 할 수 있다.
비동기 처리 - setTimeOut
// 1
console.log('hello');
// 2
setTimeout(function() {
console.log('Bye');
}, 3000);
// 3
console.log('hello again')각 라인의 코드가 비동기적으로 처리되기 때문에, 1번 3번 2번순으로 확인된다.
비동기 처리 - callback
const testCb = function(cb) {
console.log('inside of testCb func')
cb();
}
testCb(function(){console.log('this is callback')});testCb의 함수의 인자로 cb라는 매개변수를 정의했다.
이 cb는 함수로 testCb가 실행되면 함수 안에서 다시 실행된다.
testCb를 실행하면 inside of testCb func가 출력된 후에
익명함수의 리턴값인 'this is callback'이 출력된다.
이런식으로 콜백을 이용해서 비동기 처리를 계속할 경우, 콜백안에 콜백의 형태를 갖는 콜백지옥이 발생하게 됩니다.
해결책으론 Promise, Async/Await함수가 있습니다.
Promise의 3가지 상태
- pending(대기) : 비동기 로직이 아직 완료되지 않은 상태
- fulfilled(이행) : 비동기 처리가 완료되서 Promise를 반환한 상태
- rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
Promise가 pending 상태가 아니면, settled 상태라고 말한다.
(resolved 또는 rejected 상태)
Promise객체의 사용
resolve()나 reject()를 호출할 때에 인자로 전달해서 .then()으로 데이터 전달해야한다.
.then()을 호출하고나면 새로운 Promise객체가 반환
const wait = time => new Promise((resolve) => setTimeout(resolve, time));
wait(3000).then(() => console.log('hello');연쇄적으로 호출하는 Promise 체이닝도 가능하다.(catch로 끝내는걸 추천)
Reference
