JS - promise

soo's·2023년 4월 7일
0

React Study

목록 보기
4/14
post-thumbnail

프로미스 무서운 넘

😭 😰 헷갈린 부분

대망의 프로미스..
일단 내가 프로미스 배우면서 이해 안 갔던 부분이 있다.


function isPositiveP(number) {
  const executor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === "number") {
        // success -> resolve
        resolve(number >= 0 ? "positive" : "negative");
      } else {
        // fail -> reject
        reject("it is not a Number");
      }
    }, 2000);
  };
  const asyncTask = new Promise(executor);
  return asyncTask;
}
const res = isPositiveP(101);

일단 이 코드는 isPositiveP 함수 안에서 new Promise 생성자 함수를 통해서 executor 함수를 담아서 asyncTask라는 프로미스 객체를 만들고 그것을 반환하는 코드다.

따봉 챗쥐야 고마워...

나는 isPositiveP 함수를 호출하면서 101 외에는 콜백함수를 준 적이 없다. 그러나 이 코드를 실행시키면 에러가 나오지 않는다. 아니 콜백 함수가 없는데 콜백함수를 매개변수로 받는 executor 함수는 왜 에러를 던지지 않는거지?? 그래서 챗쥐한테 물어봄

In the provided code, isPositiveP function returns a Promise that is constructed using an executor function. The executor function takes two arguments: resolve and reject. These two arguments are callback functions provided by the Promise constructor to the executor function.

먼저, isPositieP(줄여서 그냥 IPP라 하겟음)함수는 executor 함수를 사용해서 만들어진 프로미스를 리턴한다. 아래 코드 말하는 듯

const asyncTask = new Promise(executor);
return asyncTask;

그리고 중요한 문장
executor(줄여서 그냥 exe라 하겟음) 함수는 resolve와 reject 매개변수를 받는데, 얘네는 프로미스 생성자가 executor 함수한테 제공하는 콜백함수다.

아 그러니까.. 쟤네는 그냥 프로미스 객체를 어떤 실행자 함수를 가지고 만들기만 하면 걍 자동으로 그 실행자 함수한테 resolve, reject 콜백 함수를 주는거임! 여기서는 exe 함수가 실행자 함수인거임 ㅇㅇ

The executor function is called immediately when the Promise is constructed.

exe 함수는 프로미스가 생성될 때 즉시! 호출된다.

const asyncTask = new Promise(executor);

이 코드로 인해서 프로미스가 생성될 때 저 exe 함수가 호출된다는 말

When isPositiveP function is called with a number argument, it creates a Promise object and returns it immediately. The executor function is not called immediately when the Promise object is created. Instead, the executor function is called asynchronously at some point in the future.
When the executor function is eventually called, it will receive the resolve and reject functions provided by the Promise constructor. The executor function can then call one of these functions, depending on whether it completes successfully or fails.

ipp 함수에 number를 넣고 호출될 때, 즉시 프로미스 객체를 생성하고 그것을 반환한다. exe 함수는 프로미스 객체가 생성될 때 실행되는 것이 아니라 비동기적으로 실행된다 (=exe 안에 setTimeOut으로 2초 걸어놓은 코드때문)
마침내 exe 함수가 호출되면 (=2초 대기 끝나면) 프로미스 생성자로부터 resolve와 reject 콜백을 받는다. 성공 여부에 따라 둘 중 하나 콜백함수를 실행한다.

아!!! 깨달음

저 위에서 챗쥐가 ipp를 호출하면 프로미스 객체를 반환한다고 하는 문장을 보고 바로 저기서 콘솔을 추가해봤다.

const res = isPositiveP(101);
console.log(res);

와우 그런데 내가 이걸 찍어보고 갑자기 깨달았다
일단 실행하자 마자

Promise { <pending> }

이런 프로미스 객체의 상태값을 받는다.
이게 끝이다.
그러니까! 저런 비동기 작업(2초 뒤에 머하라는 exe처럼)이 끝난 이후에 얘네에 대한 결과값을 받아서 처리할 수 있는 부분을 만들기 위해 콜백을 마구마구 써서 콜백지옥이 생기는거구나!!!!!!!!!!!!!!!!!
그리고 아직 비동기 작업이 완료되지 않았기 때문에 promise 객체는 pending 상태인거고!!
그리고 이 비동기 처리에 대한 결과를 사용하기 위해 사용하는 메서드가 then과 catch!!!!!!!
resolve 되면 then으로 결과 받아오고!!
reject 되면 catch로 결과 받아오고!

아 이해했다... ㅠㅠ

따봉 쥐의 조언2

To consume the result of the Promise returned by isPositiveP, you need to use the .then() method to attach a callback function to be called when the Promise is resolved successfully, or the .catch() method to attach a callback function to be called when the Promise is rejected.Here's an example of how to use the Promise returned by isPositiveP:

isPositiveP(101)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

그래 프로미스가 성공적으로 resolv되면 then으로 콜백함수 결과값 받아오고, 프로미스가 reject되면 catch로 받아와라!
친절한 코드 설명까지.. 굿 이제 진짜 이해했다!

결론

비동기 작업 했을 때, 그 결과 값을 받아오기 위해 콜백함수를 쓰고 또 그 콜백함수의 결과를 받아오기 위해 또 콜백을 쓰고 -> 이런 식으로 콜백지옥이 만들어졌던건데 이 부분을 promise로 치유해준거였다.

그러니까 new Promise(어떤 함수) 요런 프로미스 생성자 함수로 프로미스 객체를 만들고 저 '어떤 함수'는 즉시 호출된다. 이때 프로미스 생성자가 '어떤 함수'한테 resolve 콜백함수와 reject 콜백함수를 준다!

비동기 작업을 수행하고 찐으로 '어떤 함수'가 실행될 때, 그 비동기 작업의 성공 여부에 따라 성공이면 resolve 콜백에 결과를 담아서 리턴하고 그것을 then 메서드로 attach해서 결과를 받아볼 수 있음
반대로 성공 여부가 실패라면, reject 콜백에 결과를 담아서 리턴하고 그것을 catch 메서드로 attach해서 결과를 받아볼 수 있는거임!

0개의 댓글