Promise는 왜 쓰는걸까?
기존 Embedded C 개발을 하면서 callback 기반 비동기 처리에 대해서는 익숙해서, 자바스크립트에서도 callback기반으로 사용하는 예제는 금방 이해를 했다.
하지만 비동기 처리에 Promise라는 새로운 객체를 사용하는데, 정확히 이 객체의 역할이 무엇인지가 이해가 가지 않았다.
그냥 인자로 callback을 넘기고 그 callback을 호출하면 될 것을, 함수 안에서 promise 객체를 만들어 반환하고 바깥에서 굳이 then 구문 등을 통해 동작을 지정해주는게 되려 번거로운 느낌?
여러 번 읽어보고 나서야 조금 이해가 됐는데, 내 식으로 정리하면
Promise 객체를 리턴하는 함수는 일반 함수처럼 호출하는 즉시 로직을 수행하고 값을 반환하는게 아니라,
즉시 로직을 수행할 수도 있고 아닐 수도 있지만
확실한 건 로직이 수행됐을 때(언제가 될진 모르지만) 어떤 동작을 수행할 지, 또 실패했을 때 어떤 동작을 수행할 지를 미리 정해놓을 수 있다.
Promise 객체는 이런 비동기 구조를 사용하기 편하게 만들어놓은 템플릿이다.
개념적으로는 이해가 됐는데, 코드적으로는 잘 와닿지 않는 부분이 있다.
아래는 간단한 Promise 예제이다.
function getData(callback) {
// new Promise() 추가
return new Promise(function(resolve, reject) {
$.get('url 주소/products/1', function(response) {
// 데이터를 받으면 resolve() 호출
resolve(response);
});
});
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
// resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});
위 코드에서, Promise 객체 생성자로 함수 하나를 전달하고, 해당 함수의 인자가 resolve랑 reject라는 함수 오브젝트이다.
그런데 도대체 이 resolve 함수 오브젝트는 호출문에서 어디서 전달되는 것인지?
then 구문에서 전달하는 함수 오브젝트는 resolve가 아니라, resolve 가 호출된 뒤 전달되는 결과값을 받아 호출한다고 되어있는데?
위 내용에 대한 해답을 찾기 위해 구글링하여 여러 글을 찾아보며 이해하려고 노력한 결과 아래와 같이 정리했다.
(참고 블로그 글 링크 : [https://ko.javascript.info/promise-basics])
1) Promise에 생성자로 전달되는 함수는 'executor'라고 부르고, Promise 객체가 생성될 때 자동으로 호출된다.
2) 'executor'의 인자 'resolve'와 'reject'는 자바스크립트에서 자체적으로 제공하는 콜백이다.
3) resolve는 동작의 결과와 함께 호출, reject는 에러와 함께 호출해야한다.
4) 즉 executor는 자동으로 실행되고, 여기서 원하는 일이 처리되는데 처리가 끝나면 executor는 결과에 따라 resolve 또는 reject를 호출한다. (이렇게 되도록 executor 내부 로직을 구성해야한다.)
5) resolve(value) 호출 시 동작의 상태는 fulfilled, 결과는 value로 바뀐다. reject(error) 호출 시 동작의 상태는 rejected, 결과는 error로 바뀐다.
즉 정리하면, resolve(value) 는 일이 성공적으로 완료되었고 결과는 value야! 이제 등록된 .then 구문을 실행해! 라는 의미이고
reject(error)는 일이 실패했고 에러는 error야! 그러니 이제 등록된 .catch 구문을 실행해! 라는 의미이다.
