[JavaScript] Callback 지옥 / Promise

 

복습이 필요할 것 같아서 별코딩의 비동기 시리즈 공부 시작!

 

//로그인
function login(username, callback) {
  setTimeout(() => {
    callback(username);
  }, 1000);
}

// login("희원", (username) => {
//   console.log(`${username}님, 안녕하세요`);
// });

//장바구니에 넣기
function addToCart(product, callback) {
  setTimeout(() => {
    callback(product);
  }, 1000);
}

// addToCart("감자", (product) => {
//   console.log(`${product}를 장바구나에 넣었습니다.`);
// });

//결제하기
function makePayment(cardNumber, product, callback) {
  setTimeout(() => {
    callback(cardNumber, product);
  }, 1000);
}

// makePayment("0000-0000-0000-0000", "감자", (cardNumber, product) => {
//   console.log(`${cardNumber}로 ${product}를 결제하였습니다`);
// });

//콜백지옥
login("희원", (username) => {
  console.log(`${username}님, 안녕하세요`);
  addToCart("감자", (product) => {
    console.log(`${product}를 장바구나에 넣었습니다.`);
    makePayment("0000-0000-0000-0000", product, (cardNumber, item) => {
      console.log(`${cardNumber}로 ${product}를 결제하였습니다`);
    });
  });
});

 

로그인 후에 물건을 장바구니에 넣고 결제가 되어야 한다.

각각의 함수를 계속 호출하게 되면 콜백지옥 발생

 

---

Promise

 

promise는 비동기 작업의 상태를 나타낸다

 

 

 

promise의 3가지 상태

 

 

 

// Promise
// 비동기 처리에 사용되는 자바스크립트 객체
// 비동기 작업이 맞이할 성공 혹은 실패를 나타냄

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { name: "heewon" };
    console.log("네트워트 요청 성공");
  }, 1000);
});

console.log(promise);

 

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { name: "heewon" };
    console.log("네트워트 요청 성공");
    resolve(data);
  }, 1000);
});

setTimeout(() => {
  console.log(promise);
}, 2000);

 

 

 

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    //   const data = { name: "heewon" };
    const data = null;
    if (data) {
      console.log("네트워트 요청 성공");
      resolve(data);
    } else {
      reject(new Error("네트워크 문제"));
    }
  }, 1000);
});

setTimeout(() => {
  console.log(promise);
}, 2000);

 

 

 

new Promise에 전달되는 함수는 executor( 실행자, 실행함수 ) 라고 부른다. 

executor는 new Promise가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 resolve를 포함한다.

 

executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다. resolve와 reject를 신경 쓰지 않고 executor 안 코드만 작성하면 된다. 대신 executor에선 결과를 즉시 얻든 늦게 얻든 상관없이 상황에 따라 인수로 넘겨준 콜백 중 하나를 반드시 호출해야 한다.
 - resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
 - reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

 

 

비동기 함수 만들기

function getData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "heewon" };
      // const data = null;
      if (data) {
        console.log("네트워트 요청 성공");
        resolve(data);
      } else {
        reject(new Error("네트워크 문제"));
      }
    }, 1000);
  });
  return promise;
}

const promise = getData();

setTimeout(() => {
  console.log(promise);
}, 2000);

 

함수 안에 promise 객체를 만들어준다

 

 

 

 

 

then() / catch() / finally()

 

then()

//then()은 콜백함수를 전달받는다
//promise는 then이라는 메서드를 가지고 있다
//비동기 작업이 완료되길 기다렸다가 promise가 fulfilled 상태로 바뀌면 then안에 전달된 콜백함수를 호출해준다

function getData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "heewon" };
      if (data) {
        console.log("네트워트 요청 성공");
        resolve(data);
      } else {
        reject(new Error("네트워크 문제"));
      }
    }, 1000);
  });
  return promise;
}

const promise = getData();
promise.then((data) => {
  // 콜백함수는 매개변수 하나를 전달받는데 그 매개변수는 promise의 resolve를 담고있다
  console.log(data);
  // name : 'heewon' 출력
});

 

 

catch()

문제가 발생하여 promise 실패하면 catch안의 콜백함수가 실행된다

function getData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = null;
      // const data = { name: "heewon" };
      if (data) {
        console.log("네트워트 요청 성공");
        resolve(data);
      } else {
        reject(new Error("네트워크 문제"));
      }
    }, 1000);
  });
  return promise;
}

getData()
  .then((data) => {
    const name = data.name;
    console.log(`${name}님 안녕하세요`);
  })
  .catch((error) => {
    console.log(error);
  });

 

 

 

 

finally()

promise가 성공하든 실패하든 무조건 실행되어야 하는 코드가 있을 때 사용

getData()
  .then((data) => {
    const name = data.name;
    console.log(`${name}님 안녕하세요`);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("마무리 작업");
  });

 

 

 

https://ko.javascript.info/promise-basics

프라미스

 

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

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

 

 

 

---