Promise와 async, await

Promise란
주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용된다
Promise를 사용을 안하고 비동기 처리를 해야하는 경우 콜백 함수를 사용하지만
만약 콜백 함수로만 비동기를 처리하면 흔히 콜백지옥으로 코드 가독성이 너무 떨어지는 걸 볼수있다

Promise 3가지
1. pendding(대기) : 비동기 처리 로직 미완료 상태

new Promise((resolve, reject)=>{})

2. fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

let result = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("HelloWorld"), 2000);
  });
};

result() //
  .then(console.log); // then을 통해서 처리한 값을 가져옴

3. reject(실패) : 비동기 처리가 실패 또는 오류가 발생한 상태

let result = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("HelloWorld")), 2000);
  });
};

result() //
  .then()
  .catch(console.log); //실패 처리의 결과 값를 catch()로 받을 수 있다

• then() : then을 통해서 처리한 값을 가져옴
• catch() : catch로 에러를 처리함
• finally() : 어떤 상황에서도 무조건 반환함

Promise Chaining 1

const eatSomthing = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("사족보행");
    }, 1000);
  });
};

const toBePig = function (one) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${one} => 이족보행`);
    }, 1000);
  });
};

const angryFetboy = function (two) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${two} => 삼족보행`);
    }, 1000);
  });
};

eatSomthing() //
  .then(toBePig)
  .then(angryFetboy)
  .then(console.log); //사족보행 => 이족보행 => 삼족보행

Promise Chaining 2

const result = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
  });
};

result()
  .then((num) => num * 2)
  .then((num) => num * 3)
  .then((num) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  .then((num) => console.log(num)); // 5

async & await란
가장 최신 버전에 비동기 처리 패턴으로 콜백함수와 프로미스의 단점을 보완하고 가독성 좋은 코드를 작성할 수 있다

promise으로 작성하면

function foo() {
  return new Promise((resolve, reject) => {
    resolve("bob");
  });
}

foo().then(console.log);

이렇지만
async를 사용한다면

async function foo() {
  return resolve("bob");
}

foo().then(console.log);

좀 더 간편하게 사용할 수 있다
그러면 이번에는 await 까지 사용해보자

async function foo() {
  return await resolve("bob");
}

await 사용으로 굳이 then을 사용 하지 않아도 되는 걸 알수있다