Promise

❓Promise

비동기 작업의 최종 완료 또는 실패를 나타내는 Array나 Object 같은 독자적인 객체

비동기 작업이 끝날 때 까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 'Promise'라는 이름이 붙여졌다. 프로미스 객체를 반환하는 함수를 활용하면 '재사용성', '가독성', '확장성' 세가지의 장점을 가질 수 있다.
첫번째, '재사용성'은 프로미스 객체를 반환하는 함수를 필요할 때마다 호출하여 사용함으로써, 반복되는 비동기 작업을 효율적으로 처리하도록 한다.
두번째, '가독성'은 코드의 구조가 명확해지므로 비동기 작업의 '정의'와 '사용'을 분리하여 코드의 가독성을 향상시킬 수 있다.
세번째, '확장성'은 인자를 전달하여 동적으로 비동기 작업을 수행함으로써 여러 개의 프로미스 객체를 반환하는 함수들을 연결하여 복잡한 비동기 로직을 구현할 수 있다.

❗️Promise

new키워드와 Promise 생성자를 사용하여 프로미스 객체를 생성할 수 있다. 이때 작업이 성공했을 때 성공( resolve )을 알려주는 객체와 작업이 실패했을 때 실패( reject )를 알려주는 오류 객체를 매개변수로 전달한다.

const myPromise = new Promise((resolve, reject) => {
  const result = fetch(url);
  
  if(result)
    resolve(result);
  else
    reject("Error");
})

비동기 처리 작업이 완료된 후 작업 결과에 따라 resolve(result)를 호출할 경우에는 .then()절로 이어지고 resolve의 매개변수 값이 then의 콜백 함수 인자로 들어가 프로미스 객체 내부의 값을 사용할 수 있도록 한다.
반대로 처리가 실패하여 reject("Error")를 호출하게 되면 바로 .catch()로 이어져 catch의 콜백 함수가 실행된다.
또 .finally를 활용하여 성공 실패와 관계 없이 무조건 실행할 코드를 추가할 수 있다.

myPromise
.then((result) => {
  console.log("result: ", result);
})
.catch((error) => {
  console.log(error);
})
.finally(()=>{
  console.log("finally, all is done!")
})

그리고 위의 프로미스를 반환하는 함수는 다음과 같이 등록한다 !

function myPromise() {
  return new Promise((resolve, reject) => {
    // 결과에 따라 실행될 코드
  });
}

//프로미스 객체를 반환하는 함수 사용
myPromise()
.then((result) => {})
.catch((error) => {});

✔️ Promise의 3가지 상태

new Promise() 생성자로 프로미스 객체를 생성한다는 것은 이미 '비동기 작업이 진행 중'이라는 것이고, 이 작업은 성공 혹은 실패로 완료될 것이다. 이러한 '진행', '성공', '실패' 상태를 나타내는 것이 프로미스의 상태( state )라고 한다.

• Pending( 대기 )
  처리가 완료 되지 않은 상태( 처리 진행중 )
• Fulfilled( 이행 )
  비동기 처리 로직이 성공적으로 완료 됨을 표현하기 위한 상태
• Rejected( 거부 )
  프로미스 객체가 실패한 상태로 .catch() 메서드를 호출하여 처리 실패에 대한 행동 수행

✔️ Promise 핸들러

프로미스의 상태에 따라 실행되는 콜백함수를 '프로미스 핸들러'라고 한다.

• .then()
  : 프로미스가 이행( fulfilled )되었을 때 실행할 콜백 함수 등록 후 새로운 프로미스 반환
• .catch()
  : 프로미스가 실패( Rejected )되었을 때 실행할 콜백 함수 등록 후 새로운 프로미스 반환
• .finally()
  : 프로미스의 이행, 실패와 관계없이 실행할 콜백 함수 등록 후 새로운 프로미스 반환

✔️ Promise 체이닝

프로미스 핸들러를 연달아 연결하는 것으로 여러 개의 비동기 작업을 순차적으로 수행할 수 있다.

function isNumber(num){
  return new Promise((resolve, reject) => {
    resolve(num)
  });
}

isNumber('Hi!')
.then((value1) => {
  const data = value1 + 10;
  
  if(isNan(data)){
    throw new Error('the value is not a number')
    return data
  })
.catch((error) => {
  console.log(error);
});
  
// 출력 값 !
//Error: '값이 넘버가 아닙니다'
//Promise { <pending> }