비동기 처리 방식을 동기방식으로 처리 - Promise, async/await

JavaScript는 대부분 비동기 방식으로 처리 요청을 받으면 알려만 주고 바로 다음으로 넘어간다. 이러한 비동기 처리방식으로 인한 문제가 발생하는 경우가 생긴다.

예를 들면, 서버 쪽으로 요청을 보내고 결과 값을 받아온 후 화면을 출력해야 하는 작업이지만, 비동기 처리 방식으로 인해 결과 값을 받기도 전에 화면에 먼저 출력을 해 빈 화면을 보게 되는 경우가 발생할 수 있다.

이러한 문제를 해결하기 위해 Callback 방식으로 어떤 작업을 요청하면 함수에 등록하고, 작업이 수행된 결과를 나중에 Callback 함수를 통해 알려주는 구조가 흔하다. 하지만 Callback 함수가 늘어나면 코드의 중첩이 발생해 일명 Callback 지옥이 발생하게 된다.

콜백 지옥 문제를 해결하기 위해 Promise를 사용하게 된다.

작성중.....

async function 함수명() {
  await 비동기_처리_메서드_명()
}

비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await이 의도한대로 작동한다. 일반적으로 await의 대상이 되는 비동기 처리 코드느 Axios 등 프로미스를 반환하는 API 호출 함수이다.

참고

• Promise 1
• Promise 2