JavaScript(5) - promise

1.Promise

1. Promise란?

• 비동기 작업을 표현하는 JavaScript객체이다.
• 비동기 작업이 시작되면 pending 즉, 진행상태에 접어든다.
• 작업이 성공하면 fulfilled 즉, 이행상태 혹은 완료상태를 의미한다.
• 작업이 실패하면 rejected 즉, 거절상태 혹은 실패상태를 의미한다.

2. practice

function test1() {
    return new Promise((resolve, reject) => {
        let flag = true;
        if(flag) {
            resolve("success");
        } else {
            reject("fail");
        }
    })
}

console.log("start")
test1()
    .then(res => console.log(res))
    .catch(err => console.log(err))
console.log("end")

//start
//end
//success

• test1()의 실행결과 반환값은 Promise객체이다.  
• Promise객체의 callback함수의 인자로 resolve와 reject를 전달받는다. 
• callback 처리 결과에 따라 resolve혹은 reject값을 반환시킨다.
• resolve값은 처리 결과의 성공을 의미하며 then(callback) 구문을 사용해 resolve의 값을 받아 사용한다.
• reject값은 처리 결과의 실패를 의미하며 catch(callback) 구문을 사용해 reject의 값을 받아 에러를 표시한다.
• 코드를 부연 설명
  1. 첫번째 console.log()가 callstack으로 들어가 실행된다
  2. test1()이 실행되고 resolve 혹은 reject상태를 받아온 상태에서 then구문이 실행되고 곧바로 microqueue로 이동한다.
  3. 뒤이어 두번째 console.log()가 callstack으로 들어가 실행된다.
  4. 모두 비워진 callstack에 microqueue에 있던 then구문이 실행되고 resolve결과 값이 console에 찍힌다. 

 

2. 비동기 처리에서 Queue의 우선순위

MicroTask Queue가 Promise가 담기는 곳이다.

MacroTask Queue 일반적인 Task Queue이다.

MicroTask Queue가 Task Queue보다 우선순위를 가진다.

출처 : ✨♻️ JavaScript Visualized: Event Loop