동기적? 비동기적?

동기적(Synchronous)

어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 순차적으로 수행하는 방식이다.

비동기적(Asynchronous)

어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식이다.

Promise

Promise는 ES6 문법에서 도입된 문법이다.
기존의 callback 함수의 가독성을 개선시켜 나온 문법이다.
Promise는 두 개의 파라미터를 받고 각각 성공 했을 때(resolve)와 실패 했을 때(reject)를 나눠 어떤 작업을 실행할지 정해주는 문법이다.

Promise의 3가지 상태(states)

new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

new Promise() 메서드를 호출하면 대기(pending) 상태가 된다.
new Peomise() 메서드를 호출할때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

new Promise(function(resolve, reject) {
  // ...
});

Fulfilled(이행)

아래와 같이 resolve를 실행하면 promise는 이행(Fulfilled) 상태가 된다.

new Promise(function(resolve, reject) {
  resolve();
});

이행 상태가 되면 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    const data = 123;
    resolve(data); // 실행되면 promise는 fulfilled 상태가 됨
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 123
});

Rejected(실패)

resolve를 실행하면 이행 상태가 됐지만 reject를 호출하면 실패(Rejected) 상태가 된다.

new Promise(function(resolve, reject) {
  reject();
});

실패 상태가 되면 실패한 이유(실패 처리의 결과 값)을 catch()로 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject("Request is failed"); // 실행되고 promise는 rejected 상태가 됨.
  });
}

// reject()의 결과 값 Error를 error 인자에 받음
getData().catch(function(error) {
  console.log(error); // Error: Request is failed
});

async / await

async와 await는 기존의 비동기 처리 방식인 callback함수와 Promise의 단점을 보완하고 가독성을 좋게 작성할 수 있도록 나온 문법이다.

async는 function 앞에 붙일 수 있고 async 함수의 리턴 값은 무조건 promise이다.

await는 async 함수 안에서만 사용할 수 있고,
await는 promise가 완료될 때까지 기다린다.(동기적)
await 뒤에 오는 promise에서 resolve 함수가 호출될 때까지 기다린다.
그 뒤에 있는 코드 또한 진행되지 않고 대기한다.
await 뒤에 오는 promise에서 reject 함수가 호출되면 예외가 발생하고 이는 try-catch 문으로 핸들링 할 수 있다.