📌 Promise란?

비동기 작업의 최종 성공 또는 실패를 나타내는 객체

• 총 3가지 상태를 갖는다.
  • Pending(대기): 비동기 작업이 아직 완료되지 않은 상태
  • Fulfilled(이행): 비동기 작업이 성공적으로 완료되어, 비동기 작업의 결과물이 객체에 들어있다.
  • Rejected(실패): 비동기 작업이 실패한 상태로, 에러메시지가 들어있다.

📌 Promise 생성 방법

const promise = new Promise(function(resolve, reject){...});
const promise = new Promise((resolve, reject) => {...});

• Promise 객체는 생성자 함수를 통해 만들어지고, 이 생성자는 함수를 인자로 받는다. 그리고 이 함수는 reslove와 reject라는 2개의 함수형 파라미터를 가진다.
• 생성자 인자로 넘어가는 함수의 바디에서는 resolve()나 reject() 함수를 성공, 실패 여부에 따라 적절히 호출해줘야 한다.

📌 Promise 사용 방법

• Promise 객체에는 then() 메서드와 catch() 메서드가 있다.
• then() 메서드: 결과값을 가지고 수행할 로직을 담은 콜백 함수를 인자로 받는다.
• catch() 메서드: 예외 처리 로직을 담은 콜백 함수를 인자로 받는다.

예시

• fetch() 함수는 API의 URL을 인자로 받고, API 호출 결과를 Promise 객체로 리턴한다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

fetch()
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

• then()과 catch() 메서드를 통해 동기적 코드에서 사용하던 try-catch 블록과 유사한 방법으로 비동기 코드를 작성할 수 있다.

📌 Promise chaining

• then()과 catch() 메서드는 또 다른 Promise 객체를 반환한다.
• 이 Promise 객체는 인자로 넘긴 콜백 함수의 리턴값을 then()과 catch() 메서드를 통해 다시 접근할 수 있도록 해준다.
• 따라서 then()과 catch() 메서드는 연쇄적으로 호출할 수 있다.

예시

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((post) => post.userId)
  .then((userId) => "https://jsonplaceholder.typicode.com/users/" + userId)
  .then((url) => fetch(url))
  .then((response) => response.json())
  .then((user) => console.log("user:", user))
  .catch((error) => console.log("error:", error));

const promise = new Promise((resolve, reject) =>{
	resolve();
});
promise
    .then(data => {
    	throw new Error("opps");
        console.log("first value");
    })
    .catch(() => {
    	console.log("catched an error");
    })
    .then(data => {
    	console.log("second value");
    });
// catched an error
// second value

📌 Promise.resolve()와 Promise.reject()

• Promise.resolve()와 Promise.reject()는 자동으로(즉시) 성공하거나 실패하는 프로미스를 생성한다.

예시

• Promise.resolve()는 즉시 프로미스를 성공 처리하므로 첫 번째 함수가 호출된다.

Promise.resolve("Success").then(function(value){
	console.log(value);
}, function(value){
	console.log("fail");
});
// Success

• Promise.reject()는 프로미스를 즉시 실패 처리하므로 then()의 두 번째 인수가 호출된다.

Promise.reject(new Error("fail")).then(function(){
	// not called
}, function(error){
	console.log(error);
});
// Error: fail

📌 Promise.all()과 Promise.race()

✨ Promise.all()

• 모든 프로미스가 성공할 경우에만 하나의 프로미스를 반환한다.

예시

const promise1 = new Promise((resolve, reject) => {
	setTimeout(resolve, 500, 'first value');
});

const promise2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'second value');
});

promise1.then(data => {
	console.log(data);
});
// 500ms 후 first value

promise2.then(data => {
	console.log(data);
});
// 1000ms 후 second value

• 위 예시에서는 각 프로미스가 서로 독립적으로 성공 처리된다.

const promise1 = new Promise((resolve, reject) => {
	setTimeout(resolve, 500, 'first value');
});

const promise2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'second value');
});

Promise
	.all([promise1, promise2])
	.then(data => {
    	const [promise1data, promise2data] = data;
        console.log(promise1data, promise2data);
    });
// 1000ms 후
// first value second value

• 1000ms 후 첫 번째, 두 번째 프로미스의 결과가 함께 반환되었다. 즉 첫 번째 프로미스가 성공한 이후에도 두 번째 프로미스가 성공할 때까지 기다렸음을 알 수 있다.

const promise1 = new Promise((resolve, reject) => {
	resolve("my first value");
});

const promise2 = new Promise((resolve, reject) => {
	reject(Error("opps error"));
});

Promise
	.all([promise1, promise2])
	.then(data => {
    	const [promise1data, promise2data] = data;
        console.log(promise1data, promise2data);
    });
    .catch(err => {
    	console.log(err);
    }
// Error: opps error

• 프로미스 중 하나가 실패하면 다른 모든 프로미스가 성공하더라도 해당 실패에서 발생한 오류를 반환한다.

✨ Promise.race()

• 이터러블에 포함된 프로미스들 중 가장 먼저 성공 또는 실패한 결과를 반환한다.

에시

const promise1 = new Promise((resolve, reject) => {
	setTimeout(resolve, 500, 'first value');
});

const promise2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, 'second value');
});

Promise.race([promise1, promise2]).then(function(value) {
	console.log(value);
});
// second value

• 둘 다 성공하지만 두 번째 프로미스가 가장 먼저 성공하여 그 결과만 반환

참고: [자바스크립트] 비동기 처리 2부 - Promise