Promise와 비동기 처리

Promise는 비동기 처리를 위한 객체이다.

비동기가 뭐야!!!

작업이 실행되는 동안에도 다른 작업을 동시에 실행하는 기술이다.

동기는 간단하고 직관적이지만 한 작업이 끝날 때까지 다른 작업을 못하게 된다.
그림을 보면 작업 1이 완료되기까지 시간이 오래 걸리는데, 그 동안 다른 작업을 수행할 수 없어서 비효율적이다. 반대로 비동기는 효율적인 처리가 가능하다.

가장 대표적인 비동기 작업은 API 호출이다. fetch 함수는 Promise를 반환한다.

---

Promise의 상태

Promise는 처음에는 Pending(대기중) 상태이다. 근데 비동기 작업이 성공적으로 완료되면 Fullfilled(이행된) 상태, 어떤 오류가 발생하여 실패한 경우 Rejected(거부된) 상태로 변하게 된다.

Promise 객체

const myPromise = new Promise((resolve, reject) => {
  if (작업 성공) resolve("성공!!!");
  else reject("실패!!!");
});

이 코드는 Promise 객체를 생성한다.
Promise의 생성자에는 함수가 들어가고 이는 2개의 파라미터 resolve를 가진다.

• resolve는 작업 성공시에 호출하고, 이때 Promise의 상태는 fullfilled가 된다.
• 반대로 reject는 작업 실패를 의미하고, Promise의 상태는 rejected가 된다.

---

비동기 처리 방식 1: then-catch

myPromise
  .then((value) => {
    console.log(value); // 성공!!!
  })
  .catch((value) => {
    console.log(value); // 실패!!!
  });

Promise 뒤에 .then()과 .catch()를 붙이면 비동기를 처리할 수 있다.

then과 catch 모두 콜백함수를 받는데, 콜백함수의 인자에는 아까 Promise 객체에서 넣어줬던 resolve 또는 reject의 인자 값이 들어간다.

• then의 value는 resolve의 파라미터로 넣어줬던 "성공!!!"이고,
• catch의 value는 reject에 넣어줬던 "실패!!!"가 된다.

---

비동기 처리 방식 2: async-await

두번째로 async, await 키워드를 사용한 비동기 처리도 가능하다.

async 함수는 함수 앞에 async 키워드를 붙여서 선언하는데, 이 함수는 항상 Promise를 리턴한다.

// 아래의 두 함수는 같다
async function fetchData() {
  return "data";
}

function fetchData() {
  return Promise.resolve("data");
}

console.log(fetchData()) // Promise { 'data' }

await는 async 함수 내에서만 사용할 수 있는데, await는 Promise의 실행이 완료될 때까지 기다린 후 아래에 있는 코드를 실행시킨다.

const fetchData = () =>
  new Promise((resolve, reject) => {
    resolve('데이터');
  });

async function test() {
  const data = await fetchData();
  console.log(data); // 데이터
}

test();