JavaScript - Promise 정리하기 2편

https://gpdbs9409.tistory.com/52

JavaScript - Promise 정리하기 1편

위의 포스팅과 이어집니다.

 

https://www.youtube.com/watch?v=mYHVOTxEwlY

 

 

 

 

<복습> 

지난 포스팅은 Promise객체가 무엇인지 개념을 예제와 함께 알아보았는데요 

아래코드를 보면 이해가 좀 더 쉬우실 것입니다.

 

 

function getData() {
  const promise = new Promise((resolve, reject) => {
    const data = { name: "철수" };
    if (data) {
      console.log("resolve");
      resolve(data);
    } else {
      reject(new Error("네트워크 문제!"));
    }
  });

  return promise;
}

console.log(getData());

 

getData라는 함수는 ?

promise객체를 생성하고=> 내부 함수를 실행시킵니다. 

 

만약 reslove에 걸어놓은 조건이 만족하면 >result에 resolve반환값을 넣고  

reject 에 걸어놓은 조건이 만족하면 >result에 resolve 반환값을 넣는 ..그런 느낌입니다.

 

그렇다면 위의 함수를 console에 찍어보면 어떻게 될까요?

 

 

 

 

 

 

getData() 실행시 resolve로그가 기본적으로 찍힐 것이고~ 

 

console.log(getData())를 했으므로 return Promise 

Promise가 찍힐 것입니다.. .

 

 

 ^^~

 

 

 

위의 예제 코드를 콘솔에 실행하고, Promise 인자 내부를 열어보면 catch/then/finally가있습니다.

이게 뭘까요?

 

 

 

 

<오늘의 주제>

 

Promise객체에 내장된.. Finally,Then,Catch는 무엇인지 알아보겠습니다.

 

Then 을 열어보면 ,,

이렇게 되어있네요.

 

 

<기본컨셉>

아까 Promise의 result는 resolve,reject두개에 따라 저장되는 상태가 다르다고 했었습니다.

그렇다면 ..  상태에 따라서 실행되는 함수를 다르게 만들수도 있을까요? 

 

당연히 말하는 느낌 보니까 되겠죵?

 

ㅋㅋㅋ 그럴때 사용하는 것이 then/catch/try입니다.

 

case1 then

결과에 기본컨셉:promise 가 성공적으로  실행

resolve리턴값 +then함수 실행 

 

case2 catch

결과에 reject 리턴값 >catch실행입니다.

 

catch3 <Finally>

finally => 무조건 실행되어야하는 콜백함수를 반환 !성공하건 실패하건 무조건 

 

 

 

 

스포하자면) 요렇게 사용하는게 불편해서 ->더 문법적으로 편안한 형태로 만든 것이 await / async인데요. 

이건 3편에서 다루겠습니다.

--------

<예제와 함께 학습하기>

 

1. then 과finally 

function getData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: '철수' }; // 성공 시
      // const data = null; // 실패 시 테스트 용

      if (data) {
        console.log('네트워크 요청 성공');
        resolve(data); // 성공 처리
      } else {
        reject(new Error('네트워크 문제!!!')); // 실패 처리
      }
    }, 1000);
  });

  return promise;
}

const promise = getData();

promise
  .then((data) => console.log(data))
  .catch((err) => console.error(err))
  .finally(() => console.log("작업 완료"));

 

콘솔에 찍어볼게요!

 

성공적으로  finally함수와 then함수가 실행되었습니다... 

 

2 . reject가 결과값에 저장되게 해서 catch와 finally도 실행시켜보겠습니다 .

function getData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: '철수' }; // 성공 시
      // const data = null; // 실패 시 테스트 용

      if(data) {
        reject(new Error('네트워크 문제!!!')); // 실패 처리
      }
    }, 1000);
  });

  return promise;
}

const promise = getData();

promise
  .then((data) => console.log(data))
  .catch((err) => console.error(err))
  .finally(() => console.log("작업 완료"));