JS - promise2

프로미스 생성자함수로 바로 리턴

function taskA(a) {
  const executor = (resolve, reject) => {
    setTimeout(() => {
      const res = a + 1;
      resolve(res);
    }, 2000);
  };
  const asyncTask = new Promise(executor);
  return asyncTask;
}

const result = taskA(1);
result.then((res) => console.log(res)); // 2

이렇게 executor를 명시해서 사용해도 되지만 그냥 리턴으로 바로 프로미스 생성자 함수안에 화살표 함수로 만들어서 줘도 된다.

function taskA(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + 1;
      resolve(res);
    }, 2000);
  });
}

const result = taskA(1);
result.then((res) => console.log(result)); // 2

이렇게 프로미스 생성자 안에 화살표 함수로 콜백 함수들을 인자로 받게 작성해도 똑같이 setTimeout 함수를 통해 2초 후에 값이 리턴되고 then 메서드를 통해 리졸브된 값을 result에 받아서 콘솔에 보여준다.

2. 콜백지옥 해결 및 프로미스 체이닝

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 2000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + 1;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

const res = taskA(2, 3);
res
  .then((a_res) => {
    console.log("taskA의 결과", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("taskB의 결과", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("taskC의 결과", c_res);
    return c_res;
  });
// taskA의 결과 5
// taskB의 결과 6
// taskC의 결과 -6

then()구문에서 a_res를 taskB에 담아서 리턴하면 프로미스 객체를 리턴하는 것이기 때문에 거기서 다시 then().을 사용해서 연결할 수 있다
마찬가지로 b_res를 받아서 taskC(b_res)로 넘겨주고 리턴하면 then으로 c_res 값을 받아올 수 있다. 저렇게 프로미스 객체로 값을 받아 체이닝 해서 또 다른 프로미스 객체로 값을 넘기는게 프로미스 체이닝임

📌결론

비동기 작업 만들 때 return에 걍 바로 프로미스 생성자 함수 써서 화살표 함수에 resolve, reject 콜백 함수 넘겨주고
resolve시 어떤 값 주고, reject시 어떤 값 주는 거 설정해놓고 걔네 받는건 then(=resolve값), catch(=reject값) 메서드 이용하면 됨