🔎 Promise

📌 사용법

const pr = new Promise((resolve, reject) => {
  //code
});

함수를 인수로 전달받는데, 인수는 resolve, reject임
resolve: 성공했을 때 실행되는 함수
reject: 실패했을 때 실행되는 함수
어떤 일이 완료된 이후 실행되는 함수: Callback

📌 원리

초기 상태

state: pending(대기)
result: undefined

resolve(value)가 호출되면(성공),
result는 resolve함수로 전달된 값

state: fulfilled(이행됨)
result: value

reject(error)가 호출되면(실패),
result는 reject함수로 전달된 에러

state: rejected(거부됨)
result: error

📌 코드 예시(판매자)

🔗 성공 예시

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  },3000)
});

위 상태는 성공하면,

state: pending(대기)
result: undefined

에서, 3초 후
state: fulfilled(이행됨)
result: 'OK'

🔗 실패 예시

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
   reject(new Error('error'))
  },3000)
});

위 상태는 실패하면,

state: pending(대기)
result: undefined

에서, 3초 후
state: rejected(거부됨)
result: error

판매자는 3초 동안 실행하고 실패인지 성공인지 알려줌

📌 코드 예시(소비자)

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  },3000)
});

pr.then(
	function(result){}, //이행되었을 때 실행, result='OK'
    function(err){} //거부되었을 때, error에는 err이 들어옴
);

제대로 작성하면,

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  },3000)
});

pr.then(
	function(result){
    	console.log(result + '가지러 가자');
    }, 
    function(err){
    	console.log('다시 주문해주세요');
    } 
);

✔️ catch, finally: than 이외에 사용 가능

☑️ catch: 에러가 발생한 경우, reject인 경우에만 사용

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  },3000)
});

pr.then(
	function(result){}
    ).catch(
    function(err){}
);

두번째로 전달했던 함수를 catch 안으로 넣어줌
가독성도 좋고, 첫번째 함수에서의 에러도 잡아줌!

☑️ finally: 처리가 완료되면 상관없이 항상 실행

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  },3000)
});

pr.then(
	function(result){}
 ).catch(
    function(err){}
 ).finally(
    function(){
        console.log('--주문 끝--')
    }
);

📌 실제 코드

🔗 이행

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  },1000)
});

console.log('시작');
pr.then((result)=>{
  console.log(result);
})
  .catch((err) => {
  console.log(err);
})
  .finally(()=>
  console.log('끝');
});
//시작 (1초후) OK 끝

🔗 거부

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('err'));
  },1000)
});

console.log('시작');
pr.then((result)=>{
  console.log(result);
})
  .catch((err) => {
  console.log(err);
})
  .finally(()=>
  console.log('끝');
});
//시작 (1초후) err 끝

이행, 거부 상관없이 끝이라는 말은 항상 뜸

🔗 promise 사용X

const f1 = (callback) => {
  setTimeout(function() {
    console.log('1번 주문 완료);
	callback();
  }, 1000);
};

const f2 = (callback) => {
  setTimeout(function() {
    console.log('2번 주문 완료);
	callback();
  }, 3000);
};

const f3 = (callback) => {
  setTimeout(function() {
    console.log('3번 주문 완료);
	callback();
  }, 2000);
};

console.log('시작')
f1(function(){
  f2(function(){
    f3(function(){
      console.log('끝');
    });
  });
});
>depth가 깊어지면서 callback을 계속 호출해야함.

🔗 promise 사용

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('2번 주문 완료);
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

console.log('시작');
f1()
  .then(res => f2(res))
  .then(res => f3(res))  
  .then(res => console.log(res));
  .catch(conole.log)
  .finally(()=>{
    console.log('끝');
  });

promise가 연결, 연결~ 되는 것: Promise Chaining

🔗 2번이 실패

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      rej('xxx');
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

console.log('시작');
f1()
  .then(res => f2(res))
  .then(res => f3(res))  
  .then(res => console.log(res));
  .catch(conole.log)
  .finally(()=>{
    console.log('끝');
  });

2번이 실패라면, 3번은 실행부터 안하고, finally가 실행됨

✔️ Promise.all

모두 한번에 실행
배열로 함수를 받고, 함수 안의 작업이 모두 실행되어야 then안에가 실행됨
모두 이행되면 값이 실행됨
시간 절약 가능!

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      rej('xxx');
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

//Promise.all
Promise.all([f1(), f2(), f3()]).
  .then(res => {
    console.log(res);
    console.timeEnd('x'); // 대략 얼마나 걸렸는 지 계산
  });
  
  //["1번 주문 완료", "2번 주문 완료", "3번 주문 완료"]

🤔 Promise.all 사용시, 2번이 reject라면?

const f1= () => {
 return new Promise((res, rej) => {
   setTimeout(()=>{
     res('1번 주문 완료);
         }, 1000);
   });
 };
                    
const f2= (message) => {
 console.log(message);
 return new Promise((res, rej) => {
   setTimeout(()=>{
     rej('xxx');
         }, 3000);
   });
 };

const f3= (message) => {
 console.log(message);
 return new Promise((res, rej) => {
   setTimeout(()=>{
     res('3번 주문 완료);
         }, 2000);
   });
 };

Promise.all([f1(), f2(), f3()]).
 .then(res => {
   console.log(res);
 });

🧐 어떤 값도 얻지 못함...!
하나의 정보라도 누락되면 페이지를 보여주지 않음
즉, 다 보여주거나 아예 안 보여줄 때 사용

✔️ Promise.race

Promise.all과 동일,
race는 하나라도 일등으로 완료되면 끝냄

const f1= () => {
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('1번 주문 완료);
          }, 1000);
    });
  };
                     
const f2= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      rej('xxx');
          }, 3000);
    });
  };

const f3= (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(()=>{
      res('3번 주문 완료);
          }, 2000);
    });
  };

//Promise.race
Promise.race([f1(), f2(), f3()]).
  .then(res => {
    console.log(res);
    console.timeEnd('x'); // 대략 얼마나 걸렸는 지 계산
  });
  
  //"1번 주문 완료"

🤔 Promise.race 사용시, 2번이 reject라면?

🧐 2번이 reject라고 했지만, 이미 1번이 완료되었으므로 무시
용량이 큰 이미지를 로딩하는데 그 중 하나라도 완료되면 그 이미지를 보여줄 때 사용

const f1= () => {
return new Promise((res, rej) => {
  setTimeout(()=>{
    res('1번 주문 완료);
        }, 1000);
  });
};
                   
const f2= (message) => {
console.log(message);
return new Promise((res, rej) => {
  setTimeout(()=>{
    rej('xxx');
        }, 3000);
  });
};

const f3= (message) => {
console.log(message);
return new Promise((res, rej) => {
  setTimeout(()=>{
    res('3번 주문 완료);
        }, 2000);
  });
};
//Promise.race
Promise.race([f1(), f2(), f3()]).
.then(res => {
  console.log(res);
  console.timeEnd('x'); // 대략 얼마나 걸렸는 지 계산
});

//"1번 주문 완료"