Promise

박효상·2022년 4월 29일

BACKEND-TIL

목록 보기

17/21

Promise 란?

콜백이 내부에 계속 중첩되는 콜백지옥 현상을 해결하기 위해, ES6에 도입된 비동기 처리를 위한 패턴

Promise 함수는 비동기 처리 성공시 호출하는 resolve와 비동기 처리 실패시 호출하는 reject 함수를 매개변수로 가진다

Promise 3가지 상태

Pending : 프로미스가 new 연산자와 생성자 함수를 통해 생성된 직후의 상태이며, 비동기 처리가 아직 수행되지 않은 상태 (대기)

Fulfilled : resolve 함수를 호출하여 비동기 처리가 수행된 상태 (성공)

Reject : reject 함수를 호출하여 비동기 처리가 수행된 상태 (실패)

Promise 정적 메서드

Promise resolve/reject : 결과값으로 Promise 객체를 반환하는 메서드

여러 비동기이벤트 처리 방법

then() : 다수의 Promise 객체 인스턴스를 생성하고 이를 순차적으로 then()을 통해 나열하여 직렬적으로 처리하는 방식 (Promise Chaining)

실행 순서를 쉽게 파악할 수 있어 가독성 상승

또한 중도 에러 발생의 경우는 catch를 통해 에러 핸들링도 쉽게 가능

Promise.all : Promise chaining이 직렬적으로 처리한다면, Promise.all은 매개변수로 Promise 객체 인스턴스를 배열로 받고 이를 병렬적으로 처리하여 resolve한 처리 순서대로 배열에 저장하여 그 배열을 resolve하는 새로운 Promise를 반환. 총 실행시간이 Promise 객체 인스턴스 중 fulfilled까지 가장 오래걸린 시간보다 조금더 긴 수준

Promise.race : Promise.all과 같이 매개변수로 Promise 객체 인스턴스를 배열로 받고 이 중 가장 먼저 fulfilled된 Promise의 결과를 resolve하는 새로운 Promise를 반환

콜백함수란?

어떠한 이벤트가 발생 후, 매개변수로 전달한 함수가 곧바로 호출되는 것

자바스크립트는 비동기 처리 특성상, 하나의 Task 실행이 채 끝나기 전에 다음 Task가 실행되는데 이 때 개발자가 원하는대로 Task 실행 흐름을 제어하기 위해 나온 것이 콜백함수

콜백함수를 사용하여 해당 Task가 실행되고 나면 곧바로 콜백함수가 실행되도록 하여 비동기 상황에서도 순차적으로 Task 처리가 가능

콜백지옥

콜백 함수 내부에 콜백함수가 중첩적으로 계속 이어지는 현상

낮은 가독성

오류 찾기가 힘듬

async/await

콜백지옥 문제를 해결하고자 ES6에 Promise가 나왔다면, ES7에선 Promise를 좀 더 가독성 좋게 만들고자 async/await가 나오게 되었다

비동기 처리 함수에 async를 붙여줘서 해당 함수가 Promise 객체를 반환할 수 있게 해준다

async 함수 내부에서 비동기 함수 호출이 있을 때, 해당 함수 뒤로 then()을 붙이는 것이 아닌, await를 앞에 붙여주어 변수에 Promise 결과값을 담기

Promise와 then()을 사용할 때보다, 자체적으로 Promise를 반환하게 하고 async await만 붙여주어 직관적으로 동기 코드처럼 이해가 가능한 async/await가 훨씬 편리