[ JS ] Promise 설명

Promise 란?

프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '프로미스(promise)'를 반환합니다.

 

쉽게 말해서 비동기 작업이 필요할 때 사용되는 객체

• 비동기 작업
  
  • 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성
  • 비동기 작업은 주로 I/O 작업이나 네트워크 요청과 같이 시간이 오래 걸리는 작업에 유용
  • 콜백, aync/ await 의 매커니즘으로도 구현 가능

→ Promise 는 비동기 작업의 최종 완료 결과 또는 실패 만을 반환

let promise = new Promise(function(resolve, reject) {
  // executor (코드)
});

let promise2 = new Promise((resolve, reject) => {
  // executor (코드)
});

 

위의 예시 코드에 보이듯이 Promise 는  resolve 와 reject를 반환

• resolve(status: fullfilled, result: value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
• reject(status: rejected, result: error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

반환된 결과를 사용하기 위한 메서드

.then()   

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 300);
});

myPromise
  .then((value) => value *3) // 9
  .then((value) => value *3) // 27
  .then((value) => {
    console.log(value);
  })
 // 27

 

.catch()   .finally() 

let myPromise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("error!"));
});

myPromise
 .then((result) => console.log(result);)
 .catch((error) => console.log(error);)
 .finally(() => console.log("Done"););
 // error!
 // Done

 

 

단순한 예시

const promiseA = new Promise((resolve, reject) => {
  resolve(1);
});

promiseA.then((val) => console.log("출력 순서 테스트:", val));
console.log("출력 순서 테스트: 2");

// 아래 순서로 출력이 실행

// 출력 순서 테스트 : 2
// 출력 순서 테스트 : 1

 

비동기 데이터 요청

function getData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (response.ok) // 요청이 성공 
        {
          return response.json();
        } 
        else { 
          throw new Error('Something went wrong');
        }
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

getData('https://www.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));
  
  
// fetch 의 기본적인 구조 요청 예시
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json()) // 응답 객체에서 JSON 데이터를 추출한다.
  .then((data) => console.log(data)); // JSON 데이터를 콘솔에 출력한다.

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises - JavaScript | MDN

https://ko.javascript.info/promise-basics

프라미스