Promise와 async/await

Promise

• 기존의 비동기 프로그래밍의 단점을 보완하기 위해 등장함

let p = new Promise(function(resolve, reject) {
  // 실행코드
});

// resolve(value) — 작업이 성공적으로 마무리되면 호출, 결과는 value에 담김
// reject(error) — 작업이 실패시 호출, error는 error에 담김

• 콜백함수를 사용한 비동기 프로그램과는 다르게 요청과 처리를 분리해서 사용할 수 있음

// .then을 사용하여 요청 후 바로 처리해도 되고
const response = 비동기().then((data) => ...);

// 아래와 같이 요청과 처리를 나누어서 처리해도된다.                       
const response = 비동기(); // 요청
// code ... 
response.then((data) => ...); // 처리

• catch를 사용하여 에러를 처리 할 수 있다.

// 비동기 코드 실행중 reject 되거나 Error 가 나온다면 catch문을 실행한다.
const response = 비동기()
.then((data) => ...)
.catch((error) => console.log(error));

async await

• promise를 사용해도 .then() 체이닝을 계속하게 된다면 콜백지옥에 빠진것과 같은 효과를 일으킨다.
• 그래서 나온것이 async await

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

• 단점
  • 기존 .then을 사용했을때에는 각자의 코드블럭 내에서 사용되는 변수는 밖에서 참조 할 수 없지만 async function에서 여러가지 비동기요청을 한꺼번에 처리할때에는 각자의 응답변수를 참조할 수 있다.

try {
  const A = await 요청1();
 
  // 이 이후로 A는 사용하지 않지만, A에 접근할 수 있다.
  const B = await 요청2();
  const C = await 요청3();
  // console.log(A) // 접근 가능
} catch (error) {
...
}

참조

• Javascript Promise 배경부터 then catch 그리고 async await까지 - dishate
  https://velog.io/@dishate/Javascript-Promise-%EB%B0%B0%EA%B2%BD%EB%B6%80%ED%84%B0-then-catch-%EA%B7%B8%EB%A6%AC%EA%B3%A0-async-await%EA%B9%8C%EC%A7%80
• 모던 JavaScript 튜토리얼
  https://ko.javascript.info/async-await