Promise

앞서 콜백에 대해서 설명했고 콜백 헬이라고 불리는 JS 코드 구조의 해결책 중 하나가 Promise다

Promise

내용은 실행됬지만 결과를 아직 반환하지 않은 객체

const condition = true;
const promise = new Promise((resolve,reject) =>{
    if(condition){
        resolve('성공');
    }
    else{
        reject('실패');
    }
})

promise.then( (message) => {
    console.log(message);
})
.catch((error) =>{
    console.error(error);
})

Then을 사용하면 결과를 반환한다.
실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행된다.

Resolve(성공리턴값) -> then으로 연결
Reject(실패리턴값) -> catch로 연결
Finally 는 부분은 무조건 실행

프로미스라는 것은 어떤 동작을 수행하는 것
파일을 읽어와, 네이버에 요청 하나 보내 라는 것을 수행하는 동작이다.
이런 비동기 코드는 실패를 고려해야한다. 성공하면 resolve를 호출, 실패하면 reject를 호출한다.
resolve -> then / reject -> catch로 이동한다.

🔥 Promise와 Callback의 결정적 차이점
코드를 분리할수 있나 없나의 차이

setTimeout(() => {

},3000) // 이 함수 이 부분에서만 실행됨

// ----------------------
const timepromise = setTimeoutPromise(3000);
console.log('task');
console.log('task');
console.log('task');
console.log('task');
console.log('task');

timepromise.then(() =>{
    //지금수행
})

위 처럼 Promise를 사용하면 위 처럼 무조건 타임아웃을 실행하게끔 되는게 아니라 나중에 원하는 구간에서 꺼내 쓸수 있다 즉 동작을 분리할 수 있음

계속 언급되는 콜백의 치명적 문제점은 흔히 Callback hell 이다.\
callback hell을 promise로 해결할 수 있지만 제로초님은 then 이 중첩되는 코드를 프로미스 지옥이라고 부르며 해당 문제의 해결은 추후 몽구스 사용 부분에서 추가 강의 예정

프로미스 Sample

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.reject('실패유');
Promise.all([promise1,promise2])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

resolve(성공리턴값) : 바로 resolve 하는 프로미스
reject(실패반환값) : 바로 reject 하는 프로미스

Promise.all(배열) : 여러개의 프로미스를 동시에 실행

✔allSettled
최신 문법에서는 all보다 해당 기능 사용
실패한 것만 추려낼수 있음

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.reject('실패2');
const promise3 = Promise.resolve('성공3');
Promise.allSettled([promise1, promise2, promise3])
  .then((result) => {
    console.log(result);
/* [
*    { status: 'fulfilled', value: '성공1' },
*    { status: 'rejected', reason: '실패2' },
*    { status: 'fulfilled', value: '성공3' }
*  ]
*/
  })
  .catch((error) => {
    console.error(error);
  });