[Javascript] 자바스크립트 Promise과 예시, 사용법

Intro

JavaScript Promise는 비동기 작업의 결과를 나타내는 객체입니다. 

Promise는 비동기 작업이 완료되었을 때 성공 또는 실패 여부에 따라 콜백 함수를 실행하거나 다른 Promise 객체와 연결하여 체이닝할 수 있습니다. 이를 통해 비동기 작업을 더 효율적이고 가독성 좋게 처리할 수 있습니다.

 

Promise 구성요소
 - Pending(대기): 비동기 작업이 아직 완료되지 않은 상태입니다.
 - Fulfilled(이행): 비동기 작업이 성공적으로 완료되었습니다.
 - Rejected(거부): 비동기 작업이 실패하였습니다.

 

Promise 생성하기

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 작업이 성공하면 resolve(value) 호출하여 결과 전달
  // 작업이 실패하면 reject(error) 호출하여 에러 전달
});

 

Promise 체이닝

• Promise 체이닝을 통해 작업의 흐름을 관리할 수 있으며, 비동기 작업이 완료되면 다음 작업으로 넘어갈 수 있습니다.

myPromise
  .then((result) => {
    // 성공 콜백
    console.log("작업 성공:", result);
    return someOtherPromise; // 다른 Promise 객체 반환하여 체이닝 가능
  })
  .catch((error) => {
    // 실패 콜백
    console.log("작업 실패:", error);
  })
  .finally(() => {
    // 성공 또는 실패 후 항상 실행되는 콜백
    console.log("작업 완료");
  });

 

1) 순차적인 Promise 체이닝

function getUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        resolve({ id: 1, name: "John Doe" });
      } else {
        reject("사용자를 찾을 수 없습니다.");
      }
    }, 1000);
  });
}

function getUserPosts(user) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (user.id === 1) {
        resolve(["Post 1", "Post 2", "Post 3"]);
      } else {
        reject("게시물을 찾을 수 없습니다.");
      }
    }, 1000);
  });
}

getUserData(1)
  .then((user) => {
    console.log("사용자 정보:", user);
    return getUserPosts(user);
  })
  .then((posts) => {
    console.log("게시물 목록:", posts);
  })
  .catch((error) => {
    console.log("오류 발생:", error);
  })
  .finally(() => {
    console.log("작업 완료");
  });

위 예시에서 getUserData 함수는 사용자 정보를 비동기적으로 가져오는 Promise를 반환합니다. 

그 다음 getUserPosts 함수는 사용자 정보를 받아 해당 사용자의 게시물 목록을 가져오는 Promise를 반환합니다. 

이 두 개의 비동기 작업을 순차적으로 처리하기 위해 Promise 체이닝을 사용합니다.

 

2) 병렬로 처리하는 Promise.all

const promise1 = fetchDataFromServer1();
const promise2 = fetchDataFromServer2();
const promise3 = fetchDataFromServer3();

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log("모든 작업 완료:", results);
  })
  .catch((error) => {
    console.log("오류 발생:", error);
  })
  .finally(() => {
    console.log("작업 완료");
  });

위 예시에서 Promise.all 메서드는 여러 개의 Promise 객체를 배열로 받아서 병렬로 처리합니다. 

모든 Promise가 성공적으로 완료되면 then 콜백이 실행되고, 그렇지 않으면 catch 콜백이 실행됩니다.

 

Promise 예시

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John Doe" };
      // 비동기 작업 완료 후 resolve 호출하여 결과 전달
      resolve(data);
      // 비동기 작업 실패 시 reject 호출하여 에러 전달
      // reject("데이터를 불러오는 데 실패했습니다.");
    }, 2000);
  });
}

fetchData()
  .then((result) => {
    console.log("데이터 불러오기 성공:", result);
  })
  .catch((error) => {
    console.log("데이터 불러오기 실패:", error);
  })
  .finally(() => {
    console.log("작업 완료");
  });

위 예시에서 fetchData 함수는 2초 후에 비동기 작업을 완료하고 Promise를 반환합니다. 

그 후에는 then 메서드를 사용하여 성공 시의 콜백 함수를 등록하고, catch 메서드를 사용하여 실패 시의 콜백 함수를 등록합니다. 

마지막으로 finally 메서드를 사용하여 작업 완료 후 항상 실행되는 콜백 함수를 등록할 수 있습니다.