🎉 Javascript Promise object

Promise 객체 🐥

✔ 들어가면서..

Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 프론트엔드 개발자가 서버의 API url을 호출해서 결과를 화면에 구현해야 할 때 필수적이기 때문에 정확하게 이해하고 쓰는 것이 중요합니다.
API가 실행되어 서버 데이터를 요청을 보낼때, 데이터를 받아오기도 전에 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 비동기 통신으로 결과에 대한 응답을 해주는 객체 프로미스입니다.

✔ Promise 정의

MDN에 나온 promise정의는 다음과 같습니다.

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value

그대로 해석을 해보자면 "promise 비동기 처리에 사용되는 객체로, 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다. " 입니다.

프로그래밍에서 비동기(Asynchronous)란 요청과 결과가 동시에 일어나지 않는다는 것을 의미합니다.
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

promise는 비동기 처리를 마치 동기화 한것처럼 순서대로 실행하길 원할 때 사용합니다.

✔ Promise 기본 문법

Promise의 기본문법은 다음과 같습니다!

function 함수이름(매개변수){
 	return new Promise((resolve, reject) => {
 	성공할때 실행할 문장(resolve)
  	실패할때 실행할 문장(reject)
 	}
}

프로미스를 리턴받은 객체
    .then(정상적으로 프로미스 객체가 리턴 되었다면 필요한 일을 수행)
    .catch(에러객체가 리턴되었다면 에러를 처리)
    .finally(최종적으로 처리할 일을 수행)

❗ resolve, reject는 매개변수라서 마음대로 이름을 설정해도 되지만, 앞은 성공 뒤는 실패로 순서를 지켜줘야 합니다!
❗ ;를 .then().catch().fainally() 이 사이에 집어 넣지 않도록 주의합니다!

✔ Promise 기본 예제

정의만 보면 이해가 어려우니, 아래 예제코드를 통해 적용 해봅시다.
주어진 시간이 지나면 출력되는 프로그램입니다.

function runInDelay(seconds){
    return new Promise((resolve, reject) => {
        if(!seconds || seconds < 0){
            reject(new Error('second가 0보다 작음!'));
        }
        setTimeout(resolve, seconds*1000);
    }) 
}

runInDelay(2)
    .then(() => console.log('타이머가 완료되었습니다'))//promise 객체가 resolve(성공)
    .catch(console.log(error))    //promise 객체가 reject(실패) 가져올때
    .finally(()=>console.log('모든 작업이 끝났습니다.'))  //finally는 최종적으로 처리할 일을 수행
    

console창(2초 delay후)
    타이머가 완료되었습니다
    모든 작업이 끝났습니다.

runInDelay(2) 실행 후 resolve -> .then => .finallt 순서로 실행되는 것을 알 수 있습니다.
만약 runInDelay(2)을 => runInDelay()로 바꾸게 되면 어떤결과가 나올까요?

console창
	Error: second가 0보다 작음!
    at D:\joo\JavaScript\Day8\1_promise1.js:5:20
    at new Promise (<anonymous>)
    at runInDelay (D:\joo\JavaScript\Day8\1_promise1.js:3:12)
    at Object.<anonymous> (D:\joo\JavaScript\Day8\1_promise1.js:13:1)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47
	모든 작업이 끝났습니다.

if의 조건문이 true가 되면서, reject -> .catch문 -> .finally문을 통해 프로그램이 종료됩니다.

✔ Promise의 3가지 상태 (Promise States)

프로미스는 3가지의 상태가 존재합니다.
1. Pending:
- 대기상태로, fulfilled 또는 rejected 상태로 전환 할 수 있습니다.
- promise를 정의하면서 생깁니다.
2. fulfilled:
- 이행상태로, 바뀌지 않는 value을 갖게되고, 상태를 전환을 해서는 안됩니다.
- .then을 통해 리턴값을 받을 수 있습니다.
3. rejected:
- 실패상태로, 바뀌지 않는 reason을 갖게되고, 상태를 전환을 해서는 안됩니다.
- .catch를 통해 실패한 이유를 받을 수 있습니다.

✔ Promise Chaining

• 여러 개의 프로미스를 연결하여 사용 할 수 있습니다.

• promise.reject(): 지정된 이유로 거부된 새 Promise 객체를 리턴합니다.

• promise.resolve(): 지정된 값으로 확인된 새 Promise 객체를 리턴합니다. .then() 이 있을때 그 다음 promise 객체를 리턴하게 됩니다.

  예제코드를 통해 한번 이해해봅시다!
  🐔 => 🐓 => 🥚 => 🍳을 순서대로 리턴하며 출력하는 예제입니다.

  function fetchEgg(chicken){return Promise.resolve(`${chicken} => 🥚`); }
  function fryEgg(egg){return Promise.resolve(`${egg} => 🍳`);}   
  function getChicken(){return Promise.resolve(`🐔 => 🐓`);}
  
  getChicken()
    .then((chicken) => {return fetchEgg(chicken)})
    .then((egg) => fryEgg(egg)) 
    .then((friedEgg)=>console.log(friedEgg))
    .catch((error) => console.log(error.name));
  
  //----------------------
  //cosole창
  //🐔 => 🐓 => 🥚 => 🍳
  		```
  
  

• 모두 promise.resolve이므로 .then에 따라가면서 리턴값을 반환합니다.
  가장 먼저 getChicken()이 실행되고, 리턴값 🐔 => 🐓는 다시 chicken안에 들어가 그 다음문장 fetchEgg()가 실행됩니다. 다시 🐔 => 🐓 => 🥚는 egg에 들어가 fryEgg()가 실행되고 최종적으로 🐔 => 🐓 => 🥚 => 🍳가 출력되게 됩니다.
  

• 만약에 .reject가 있다면 어떤식으로 움직이게 될까요?

  function fetchEgg(chicken){return Promise.resolve(`${chicken} => 🥚`); }
  function fryEgg(egg){return Promise.resolve(`${egg} => 🍳`);}  
  function getChicken(){ return Promise.reject(new Error(`치킨이 다 떨어졌음!`));}
  
  getChicken()
    .then((chicken) => {return fetchEgg(chicken)})
    .then((egg) => fryEgg(egg)) 
    .then((friedEgg)=>console.log(friedEgg))
    .catch((error) => console.log(error.name));
  //----------------------
  //cosole창
  //Error

• 가장먼저 getChicken이 실행되지만, reject가 된 후 .catch()로 가 Error을 출력합니다.
• 만약에, .catch()가 앞에 있었다면 어떻게 될까요?

  function fetchEgg(chicken){return Promise.resolve(`${chicken} => 🥚`); }
  function fryEgg(egg){return Promise.resolve(`${egg} => 🍳`);}  
  function getChicken(){ return Promise.reject(new Error(`치킨이 다 떨어졌음!`));}
  etChicken()
    .catch((error) => console.log(error.name));
    .then((chicken) => {return fetchEgg(chicken)})
    .then((egg) => fryEgg(egg)) 
    .then((friedEgg)=>console.log(friedEgg))
  //----------------------
  //cosole창
  //Error
  //undefined => 🥚 => 🍳

• 맨앞으로 옮겨주면 에러처리를 하고나서 뒷 내용을 진행하게 됩니다. 따라서, reject가 된 후 Error를 출력하고, 아무것도 반환하지 않아 undefined를 반환합니다. 만약 .catch(() => '🐥')을 했다면 🐥을 반환하여 🐥 => 🥚 => 🍳이라고 출력되게됩니다.
• 위의 실행문을 축약형으로 간단하게 표현가능 합니다. 한줄만 적게 되면 그 값을 return하기 때문입니다!

  getChicken()
    .catch(() => '🐥')  //   
    .then(fetchEgg)
    .then(fryEgg) 
    .then(console.log)

  ✔ Promise의 비동기

• 비동기 처리가 어떤방식으로 이루어지는지 알아볼까요? 다음 세가지 함수가 있습니다.

  function getBanana(){
    return new Promise((resolve) => {
        setTimeout(()=>{
            resolve('🍌');
        },1000);
    })
  }
  function getApple(){
    return new Promise((resolve) => {
        setTimeout(()=>{
            resolve('🍎');
        },3000);
    })
  }
  function getOrange(){
    return Promise.reject(new Error(`오렌지는 없음`))
  }

  ---

출처
MDN
promise-for-beginner
류정원 강사님 강의자료