[Javascript] Promise

 

한입 크기로 잘라 먹는 리액트(React.js)

Promise : 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄. 비동기 연산 종료 이후 결과값과 실패사유를 처리하기 위한 처리기를 연결한다

 

 

 

 

 콜백을 이용한 isPositive처리

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      //성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      //실패 -> reject
      reject("주어진 값이 숫자형 값이 아닙니다");
    }
  }, 2000);
}

isPositive(
  4,
  (res) => {
    console.log("성공", res);
  },
  (err) => {
    console.log("실패", err);
  }
);

숫자 입력 시 성공함수를 타고  resolve 결과값이 출력된다

 

 

 

 

 

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      //성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      //실패 -> reject
      reject("주어진 값이 숫자형 값이 아닙니다");
    }
  }, 2000);
}

isPositive(
  function () {},
  (res) => {
    console.log("성공", res);
  },
  (err) => {
    console.log("실패", err);
  }
);

number타입이 아닌 그 외의 타입을 입력하게 되면 실패함수를 타게된다.

 

 

 

 

 

 Promise를 이용한 isPositiveP처리

function isPositiveP(number) {
  //비동기 작업을 실질적으로 수행하는 실행자
  const executor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === "number") {
        resolve(number >= 0 ? "양수" : "음수");
        console.log(number);
      } else {
        reject("주어진 값이 숫자형 값이 아닙니다");
      }
    }, 3000);
  };

  //new 키워드를 사용해서 Promise객체 생성
  const asyncTask = new Promise(executor);

}
isPositiveP(101);

 

 

 

 

 

 

function isPositiveP(number) {
  //비동기 작업을 실질적으로 수행하는 실행자
  const executor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === "number") {
        resolve(number >= 0 ? "양수" : "음수");
        console.log(number);
      } else {
        reject("주어진 값이 숫자형 값이 아닙니다");
      }
    }, 3000);
  };

  //new 키워드를 사용해서 Promise객체 생성
  const asyncTask = new Promise(executor);
  return asyncTask;
}
isPositiveP(101);

return을 넣어 비동기작업이후 Promise로 반환하는 타입의 객체로 만들어줬다

 

 

 

 

 

---

 

fulfillment (.then 메서드 반환) : 이행, 연산이 성공적으로 완료됨

//반환받은 프로미스객체를 이용하여
//아무데서나 resolve, reject 결과를 볼 수 있다
const res = isPositiveP(123);

res
  .then((res) => {
    console.log("작업 성공 : ", res);
  })
  .catch((err) => {
    console.log("작업 실패 : ", err);
  });

 

rejection(.catch 메서드 반환) : 거부, 연산이 실패함

//반환받은 프로미스객체를 이용하여
//아무데서나 resolve, reject 결과를 볼 수 있다
const res = isPositiveP("가나다");

res
  .then((res) => {
    console.log("작업 성공 : ", res);
  })
  .catch((err) => {
    console.log("작업 실패 : ", err);
  });

 

 

 

 

 

 

 

---

어제 학습했던 콜백 지옥을 Promise를 사용해서 비동기처리

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}
function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}
function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(3, 4, (a_res) => {
  console.log("task A : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("task B : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("task C : ", c_res);
    });
  });
});

 

 function taskA(a, b, cb) {
   const executorA = (resolve, reject) => {
     setTimeout(() => {
       const res = a + b;
       cb(res);
     }, 3000);
   };
   const asyncTask1 = new Promise(executorA);
   return asyncTask1;
 }
 
 //위아래 동일한 의미를 지님. 
 
function taskA(a, b, cb) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      cb(res);
    }, 3000);
  });
}

then chaining을 사용해서 인자전달하기

taskA(5, 1)
  .then((a_res) => {
    console.log("A RESULT : ", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("B RESULT : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("B RESULT : ", c_res);
  });

프로미스.then(좌), 콜백지옥(우)

콜백대신 프로미스를 사용하는 이유 : 프로미스가 훨씬 가독성이좋고 중간에 다른 호출을 넣을 수 있다.

 

 

 

 

const bPromistResult = taskA(5, 1).then((a_res) => {
  console.log("A RESULT : ", a_res);
  return taskB(a_res);
});

console.log("분리하기");
console.log("분리하기");
console.log("분리하기");
console.log("분리하기");

bPromistResult
  .then((b_res) => {
    console.log("B RESULT : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("B RESULT : ", c_res);
  });

이런식으로 비동기를 호출하는코드와 결과를 처리하는 코드를 분리할 수 있다.

 

 

 

 

 

 

 

참고 :

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

- 한입 크기로 잘라 먹는 리액트(React.js)