8-1. Promise, Async-Await

* Callback 예시

const a = (callback) => {
  setTimeout(() => {
    console.log("1");
    callback(); //콜백 지옥 발생
  }, 1000);
};

const b = () => console.log("2");

a(() => {
  b();
});

 

* Promise 예시

const a = () => {
  return new Promise((resolve) => {
    //Promise클래스 사용
    //매개변수 resolve
    setTimeout(() => {
      console.log("1");
      resolve();

      //콜백이 실행 되는 부분에 호출
      // resolve가 호출되는 부분은 숫자 1 출력한 다음에 실행위치를 보장하는 부분

      //Promise를 사용하고자 하는 것은 callback이라는 매개변수를 대신하여,
      //resolve라는 개념으로 실행 위치 보장
    }, 1000);
  });
};

const b = () => console.log("2");

const c = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("3");
      resolve();
    }, 1000);
  });
};

const a = () => console.log("4");

a().then(() => {});
//then메서드로 전달되는 함수는 Promise 함수의 resolve라는 매개변수로 들어가 내부에서 사용
//resolve는 콘솔 출력된 다음에서 호출되므로, 그 다음에 실행 보장

 

a().then(() => {
  c().then(() => {
    b();
  });
}); //이게 계속 반복되면 결국 중첩되는 콜백 패턴과 다를게 없음

 

* Promise chaining 사용하기

// then이라는 메서드에 제공되는 callback부분에서 promise 인스턴스를 반환하게 되면
// then 메서드에 메서드 체이닝에 이어 then 메서드를 한번 더 쓸 수 있음

a()
  .then(() => b())
  .then(() => c())
  .then(() => {
    d();
  });

a()
  .then(b)
  .then(c)
  .then(d)
  .then(() => console.log("done!!"));

 

 

* async-await

const a = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("1");
      resolve();
    }, 1000);
  });
}; //프로미스 인스턴스를 반환하는 비동기 코드

const b = () => console.log("2");

const wrap = async () => {
  await a();

  // await는 a()라는 비동기 함수의 실행을 기다린다는 의미
  // await는 promise 인스턴스가 반환되어야만 사용 가능
  // await는 async를 사용하는 함수 안에 있어야 사용 가능 함

  b();
}; 

// await로 a()호출 기다렸다가 b()호출

wrap();