비동기 처리 (2) - Promise

이후에 실행될 함수의 자리를 표시하는 Callback과 다르게 Promise는 생성자로 만든 Promise 객체 안의 내용을 바로 실행한다. 이 내용을 execute function이라 한다.

  const promise = new Promise((resolve, reject) => {
    // 비동기로 처리할 내용
    resolve({ name: "SSS" });
    reject(new Error("NETWORK ERROR"));
  });
  console.log(promise);

Promise의 state는 pending, fulfilled, rejected가 있으며 fulfilled인 경우 결과(data)를 resolve에, rejected인 경우 reject에 넣은 Promise 객체를 반환한다. 

---

setTimeOut을 이용해 Promise의 state 확인하기

function getData() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      //const data = { name: "AASS" };
      const data = null;
      if (data) {
        resolve(data);
      } else {
        reject(new Error("NEwrork problem"));
      }
    }, 2000);
  });
  return promise;
}

const promise = getData();

console.log(promise);

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

처음 state는 pendding이었다가 조건문에 의해 rejecte된다.

---

then, catch, finally 사용하기

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("get data done");
  });

 

then은 fulfilled state인 Promise 객체로부터 resolve된 data를 가져와 함수 내의 기능을 실행한다.

then 안에서 문자열이 return된다면 해당 문자열을 Promise화해서 return하기 때문에 then을 이어붙이는 chaining이 가능하다.

 

catch는 Promise 객체가 rejected state라면 그로부터 Error를 받아와 이용할 수 있다.

then과 마찬가지로 문자열을 Pormise화하여 return한다.

 

finally는 Promise의 state와 상관없이 무조건 실행되는 함수이다.

---

fetch 이용해 server로부터 data 받아오기

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Final task");
  });

 

fetch는 url로부터 Response 객체를 비동기적으로 받아오는데, 이것을 then을 이용하여 json으로 parsing하면 후 다시 then을 사용하여 data를 출력하면 data 배열을 확인할 수 있다.

 

resolve 내용: fetch (Response) → then (Promise)  →  then(Array)

---

Shopping mall 실습

function login(userName) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userName) {
        resolve(userName);
      } else {
        reject(new Error("No user name."));
      }
    }, 3000);
  });
}

function addToCart(product) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (product) {
        resolve(product);
      } else {
        reject(new Error("No product."));
      }
    }, 2000);
  });
}

function makePayment(cardNumber, product) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (cardNumber.length !== 16) {
        reject(new Error("Wrong card number."));
        return;
      }
      if (!product) {
        reject(new Error("No product."));
        return;
      }
      resolve({ cardNumber, product });
    }, 1000);
  });
}

login("")
  .catch(() => {
    return "guest";
  })
  .then((data) => {
    console.log(`${data} logged in.`);
    return addToCart("Potata");
  })
  .then((data) => {
    console.log(`add ${data} into bag`);
    return makePayment("12345678901123456", data);
  })
  .then((data) => {
    console.log(`paid ${data.product} with ${data.cardNumber}`);
  })
  .catch((error) => {
    console.log(error.message);
  });

 

조건문을 사용해 reject되는 경우를 설정했다.

 

login의 userName에 ""이 전달되면 reject가 된다. 이 때 catch에서 문자열을 (Promise)반환하면 다음 then이 이것을 data로 사용할 수 있다.

 

resolve에 두 개 이상의 변수를 전달할 때는 object를 사용한다. 

실행 결과