• 콜백 함수
• 프로미스
  • 프로미스 객체
  • Promise.all
• async / await

자바스크립트에서 비동기를 처리하는 방법에 대해 서술한 문서입니다.

콜백 함수

프로미스

프로미스 객체

프로미스는 이러이러한 값을 나중에 반환해주겠다~ 라고 약속하는 객체입니다.

new Promise를 사용해 프로미스 객체를 생성할 수 있습니다.

Promise.js

1
2
3
4
5
6
7
8
9
10
const condition = true;

// 프로미스 객체 생성
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve("성공");
  } else {
    reject("실패");
  }
});

이 때, Promise 내부에는 resolve 및 reject를 매개변수로 하는 콜백 함수를 넣어야 합니다. 위 코드의 콜백 함수에서는 조건에 따라 resovle 또는 reject에 인자를 넣어 호출합니다. 이 인자는 프로미스 객체에서 메서드를 호출해 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
promise
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(err);
  })
  .finally(() => {
    console.log("완");
  });

resolve 호출 시 then 메서드가 실행되어 resolve의 인자(“성공”)를,

reject 호출 시 catch 메서드가 실행되어 reject의 인자(“실패”)를 받습니다.

finally 메서드는 항상 실행됩니다.

Promise.all

Promise.all을 사용하면 여러 프로미스를 한 번에 실행할 수 있습니다.

Promise_all.js

1
2
3
4
5
6
7
8
9
10
const promise1 = Promise.resolve("성공1");
const promise2 = Promise.resolve("성공2");

Promise.all([promise1, promise2])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

배열 내 모든 프로미스가 resolve를 호출했을 때 then 메서드가 실행됩니다. reject 호출이 하나라도 발생하면 catch 메서드가 실행됩니다.

async / await

ES2017에 추가된 기능으로, 프로미스를 사용해 작성된 코드를 더 간단하게 만들 수 있습니다.

1. async을 사용해 함수를 선언합니다.
2. 프로미스 앞에 await를 붙입니다.