Promise
- 자바스크립트는 동기적으로 실행된다. 하나의 실행이 끝나야 다음 코드를 실행한다는 것이다.
- 한편, Promise는 비동기로 실행된다. 코드를 연속으로 처리하지 않고 중간에 흐름을 끊고, 다시 처리할 순간이 되면, 다음 코드를 처리한다.(마치 process의 blocked된 process와 같다.)
- DOM 스펙에서 JS 스펙이 되었다.
Promise 실행 처리 흐름
const obj = new Promise(resolve, reject) => {
resolve()
console.log("promise")
}
obj.then((value)=>{
console.log("성공")
},(reason)=>{
console.log("실패")
})
console.log("finsiehd")
출력 순서는 다음과 같다.
- "promise"
- "finsiehd"
- "성공"
실행 흐름
-
new Promise()
를 실행한다.- 파라미터 함수를 실행하게 된다.
resolve()
는 호출하지 않는다.console.log("promise")
를 실행한다.
-
생성된 Promise Object를
obj
에 할당한다. -
obj.then()
은 실행하지 않는다. -
console.log("finished")
를 실행한다. -
resolve()
가 실행된다- 따라서
then()
의 첫 번째 파라미터 함수가 호출되면서,console.log("성공")
이 실행된다. - 만약, reject()가 호출되었으면, then의 두 번째 파라미터 함수가 호출되었을 것이다.
- 따라서
Promise의 상태
상태는 세 가지이며, 한 순간에는 하나의 상태만 가질 수 있다.
pending
new Promise()
로 인스턴스를 생성하는 상태다. Promise 생성자의 파라미터 함수가 실행되고 있을 때도 pending 상태다settled
pending이 종료된 상태를 나타내며, 성공과 실패를 나타내는 상태 두 개가 존재한다.
다시 실행 할 수 있는 상태가 되었을 때 resolve()
가 호출된다. 이때, resolve는 .then
을 호출하는 것과 같다. then()
은 Promise의 상태가 fullfilled 이면 첫 번째 파라미터 함수(핸들러)를 호출하고, Promise의 상태가 rejected면 두 번째 파라미터 함수(핸들러)를 호출하게 된다
new Promise(executer function)
executer function 실행자 함수
function(resolve, reject){...}
- resolve와 reject는 각각 함수 이름를 의미한다. resolve는 Promise가 성공적으로 완료되었을 때 실행되는 함수이며, reject는 Promise 수행 중 에러가 발생했을 때 실행되는 함수다.
{...}
에는 실행자 코드를 작성한다.
const obj = new Promise((resolve, reject) => {
resolve("성공");
reject("실패");
});
- Promise 인스턴스를 생성하여 obj에 할당한다.
- resolve와 reject 이름의 function Object를 생성하고 Promise 인스턴스에 설정한다.
- 다른 모든 코드가 실행 된 후, 실행자 코드가 성공적이면 resolve를 호출하고, 반대인 경우에는 reject를 호출한다.(Promise는 흐름이 끊기고 나중에 실행되기 때문에 비동기 처리라고 한다.)
Promise Chain, Deferred Action
.then()
과 같은 로직을 Promise Chain 혹은 Deferred Action 이라고 부른다.
const obj = new Promise((resolve, reject) => {
resolve("성공");
reject("실패");
});
obj.then(
(value) => {
console.log(value);
},
(reason) => {
console.log(value);
}
);
console.log("finished");
.then()
과 같은 deferred Action은 실행되지 않고, 전체 코드가 끝난 후, 실행자가 deferred Action 을 호출하면 동작하게 된다.- 전체 코드 실행이 끝나면, Promise 인스턴스는 자신의 상태가 fullfilled면
resolve("성공")
를 호출하고, 상태가 rejected면reject("실패")
을 호출하게 된다. resolve("성공")
이 호출되면,"성공"
이 then의 value에 설정되고,reject("실패")
가 호출되면"실패"
가 then의 reason에 설정된다.- 엔진은 Promise 상태가 fullfilled면 then의 첫 번째 핸들러를 호출한다. 상태가 rejected면 then의 두 번째 핸들러를 호출한다.