(Javascript) promise, async&await의 이해와 활용

 

비동기란?

자바스크립트는 위에서 아래부터 순차적으로 코드를 실행한다. 동기적(synchronus)으로 동작한다는 뜻이다.

 

그런데 서버에서 api 정보를 받아올 때 시간이 걸릴 수 있다. 

 

이때 동기적으로 코드를 짜면 정보를 받아올 때까지 다음 코드가 작동하지 않기에 문제가 생길 수 있다.

 

이때는 코드를 비동기적(asynchronus)으로 처리하면 좋다.

 

비동기적으로 코드를 처리하는 데에는 여러 방법이 있다. 

 

콜백함수를 사용해 처리할 수도 있으나 가독성이 떨어지기에 프로미스(promise)를 활용한다.

 

 

프로미스(promise)란?

 

프로미스(Promise)는 비동기 작업을 처리하기 위한 객체이다.

 

new Promise() 생성자를 사용해 새 프로미스를 생성할 수 있다. 

 

프로미스는 다음 세 가지 상태를 갖는다.

 

• 대기(Pending): 작업 완료 전
• 이행(Fulfilled): 작업 성공 > resolve()이 호출됨 > .then() 메서드 자동 실행
• 거부(Rejected): 작업 실패 > reject()이 호출됨 > .catch를 통해 실패 처리 가능

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
});

myPromise.then((result) => {
  console.log('성공:', result);
}).catch((error) => {
  console.error('실패:', error);
});

 

 

 

 

async, await의 활용

프로미스의 가독성을 높이고 싶다면 async, await를 활용할 수 있다. 

 

먼저 비동기적으로 처리될 함수를 만들 때는 function 앞에 async를 붙여 준다. 

 

또한 비동기적으로 실행하고 싶은 부분에 await 키워드를 붙여주면 된다.

 

이렇게 되면 프로미스가 종료되기 전까지 다른 작업이 비동기적으로 진행되며,

 

프로미스가 종료된 이후에는 그 결과값이 변수 안에 담긴다.

 

참고로 await 키워드는 async 함수 안에서만 사용될 수 있다.

 

async function fetchData() {
  try {
    const result = await new Promise((resolve, reject) => {
	  // 비동기 작업 수행
    });
    console.log('성공:', result);
  } catch (error) {
    console.error('실패:', error);
  }
}

fetchData();