• 비동기 처리
  • 콜백 함수
  • 프로미스
    • 프로미스 객체
    • 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((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.error(err);
  });

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

async / await