개인공부

[비동기] promise

chsua 2023. 3. 17. 14:04

1. resolve / reject = callback 함수이다.

2. resolve / reject 인수는 진행 상 필수요소이다.

    > 없다고 해서 문제가 발생하는 것은 아니지만 아래 finally, then, catch가 실행되지 않는다.

3. 사용예시

    1) val() 실행되며 안에 있는 프로미스 작동

    2) setTimeout = 비동기 함수라서 동기 흐름에서 벗어나서 작동

    3) setTimeout 안 함수로 랜덤함수를 만들어 5보다 작으면 성공/ 크면 실패로 성공실패 사례를 만듦

        > 해당 부분은 원래 API가 연결이 안되는 등의 오류를 처리하기 위함. 연결되면 성공, 안되면 실패처럼.

        > 하지만 여기서는 임의로 랜덤함수로 성공-실패를 지정해줌

    4) 여기서 "안에 들어있는 콘솔로그"  는 프로미스 안에 있기 때문에 첫 번째로 출력됨

    5) val()의 리턴값은 프로미스이고, 여기에 .finally(), .then(), .catch()를 이을 수 있음. 다만, 순서의 영향을 받음.

         >  .finally(콜백함수)는 성공여부와 상관없이 일어나는 일. 이름과 달리 위치에 따라 먼저 실행됨.

         >  .then(콜백함수)는 성공되는 경우 일어나는 일.

         >  .catch(콜백함수)는 실패되는 경우 일어나는 일.

4. 추측

    1) val()                       - 왼쪽과 같은 코드를 짜면 success는 문제없이 실행되나 reject는 catch/then 모두 실행됨.

            .catch()                아무래도 catch에서 뭔가를 더 할 수 있으니 이 리턴값을 처리하기 위해 then이 수행되는거 아닌가 싶음.

            .then()

function val() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const random = Math.floor(Math.random() * 10);
      if (random < 5) resolve(random);
      reject(random);
      console.log("안에 들어있는 콘솔로그");
    }, 3000);
  });
}

val()
  .finally(() => console.log("시작"))
  .then((success) => console.log("success", success))
  .catch((reject) => console.log("reject", reject))
  .finally(() => console.log("끝"));

// [ console ]

// case 1
// 안에 들어있는 콘솔로그
// 시작
// reject1 8
// 끝

// case 2
// 안에 들어있는 콘솔로그
// 시작
// success 3
// 끝