서두

점심시간마다 깨작깨작 공부한 걸 정리를 하려 한다. 이번에는 비동기 처리에 이용하는 객체 Promise와 비동기 처리 패턴 중 하나인 async&await다.

Promise

Promise는 서두에도 말했듯 비동기 처리에서 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

상태(처리과정)

이미지출처: https://velog.io/@shroad1802/Promise-1

Pending (대기)

비동기 처리 로직이 아직 완료되지 않은 상태다. new Promise() 메서드를 호출하면 대기상태가 된다. 인자로는 (resolve, reject)를 받는다.

Fulfilled (이행)

비동기 처리가 완료되어 Promise가 결과의 값을 반환해 준 상태다. resolve 인자를 실행하면 이행 상태다. 결과값은 then() 메서드를 이용하여 받을 수 있다.

Rejected (실패)

비동기 처리가 실패하거나 오류가 난 상태다. reject 인자를 실행하면 실패 상태다. 실패의 원인을 catch()로 받을 수 있다.

예시

var getData = (callback) => {
  return new Promise(function(resolve, reject) {
	var data = 1;
    resolve(data);
  });
}

getData().then(function(resovleData) {
	console.log(resovleData);
});

위의 코드가 제대로 실행되면 then() 메서드를 통해 값이 제대로 출력된다.

async&await

async와 await는 비동기 처리 패턴 중 하나이다. 기존의 비동기 처리 방식은 콜백 함수와 Promise의 단점을 보완해준다. 덕분에 읽기 좋은 코드로 만들어준다.

예시

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

예시의 코드는 비동기 처리 방식으로 진행되기 때문에, 제대로 실행되지 않을 것이다. 그래서 아래와 같은 코드로 변경을 해주어야 한다.

function logName() {
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

위의 코드처럼 콜백 함수를 넣고 진행을 해야 원하는 대로 실행이 가능하다. 그런데 콜백을 사용하지 않고 처음 예시처럼 진행하기 위해서 async와 await를 사용하면 된다.

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

함수의 앞에 예약어 async를 붙이고 비동기 처리하는 코드 앞에 await를 붙이면 된다. 그러면 콜백함수를 활용하지 않더라도 원하는 대로 실행된다.

정리하기

이번에는 Promise와 async, await에 대해 간단하게 정리했다. 프로젝트를 진행하면서 중간중간 만났던 것들인데 궁금해서 공부하고 기록까지 했다. 나중에 리펙토링할 때 꼭 활용할 것이다.

공부 출처:
https://joshua1988.github.io/web-development/javascript/js-async-await/

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/