Promise

비동기 코드에서는 실행 순서를 예측하기 어렵기 때문에 비동기 작업이 끝난 후 실행할 코드를 명확하게 제어하기 위해서 Promise가 필요합니다.

Promise 란?

비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체

Promise의 3가지 상태

- Pending(대기) : 아직 작업이 완료되지 않은 상태

- Fulfilled(성공) : 비동기 작업이 성공적으로 마무리된 상태

- Rejected(실패) : 비동기 작업이 실패한 상태

 

대기 -> 성공 : 해결(resolve) - 원하는 작업이 완료되었을 때 실행

대기 -> 실패 : 거부(reject) - 작업 중 오류가 발생했을 때 실행

 

const promise = new Promise(() => {
	setTimeout(() => {
    	console.log("안녕");
    }, 2000);
});

console.log(promise);

 

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	console.log("안녕");
        resolve();
    }, 2000);
});

setTimeout(() => {
	console.log(promise);
}, 3000);

 

 

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	console.log("안녕");
        resolve("결과");
    }, 2000);
});

setTimeout(() => {
	console.log(promise);
}, 3000);

 

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("안녕");
        reject("실패한 이유");
    }, 2000);
});

setTimeout(() => {
    console.log(promise);
}, 3000);

 

 

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const num = 10;

        if (typeof num === "number") {
            resolve(num + 10);
        } else {
            reject("num은 숫자가 아닙니다.");
        }
    }, 2000);
});

promise.then((value) => {
    console.log(value); // 20
});

 

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const num = null;

        if (typeof num === "number") {
            resolve(num + 10);
        } else {
            reject("num은 숫자가 아닙니다.");
        }
    }, 2000);
});

promise.catch((error) => {
    console.log(error); // num은 숫자가 아닙니다.
});

 

Promise Chaining 

하나의 Promise가 끝나면 그 결과를 다음 Promise로 넘기는 방식으로 연속적인 비동기 작업을 처리하는 패턴

new Promise((resolve, reject) => {
    setTimeout(() => resolve(10), 1000);
})
    .then(result => {
        console.log("Step 1:", result);
        return result * 2;
    })
    .then(result => {
        console.log("Step 2:", result);
        return result * 3;
    })
    .then(result => {
        console.log("Step 3:", result);
        return result - 5;
    })
    .then(finalResult => {
        console.log("Final result:", finalResult);
    });

 

위의 코드의 출력 결과는 다음과 같습니다.

(1초 후)
Step 1: 10
Step 2: 20
Step 3: 60
Final result: 55

 

적용해보기

new Promise((resolve, reject) => {
  console.log("Initial");

  resolve();
})
  .then(() => {
    throw new Error("Something failed");

    console.log("Do this");
  })
  .catch(() => {
    console.log("Do that");
  })
  .then(() => {
    console.log("Do this, whatever happened before");
  });

 

 

new Promise가 실행되면서 console.log("Initial"); 가 실행돼서 Initial이 출력됩니다.

 

resolve() 가 호출됐으므로 다음 .then() 블록으로 이동하고, .then() 내부에서 throw new Error("Something failed"); 가 실행됩니다.

강제로 에러를 발생시키기 때문에 console.log("Do this");는 실행되지 않습니다.

 

에러가 발생했으므로 .catch() 로 넘어가서 console.log("Do that"); 가 실행돼서 Do that이 출력됩니다.

 

.then()으로 넘어가서 console.log("Do this, whatever happened before"); 가 실행돼서 Do this, whatever happened before이 출력됩니다.

 

출력 결과

Initial
Do that
Do this, whatever happened before