[Vue.js] 영화 검색 사이트 예제 - 12. 비동기_콜백과 프로미스 객체의 이해

참조) Promise - JavaScript | MDN (mozilla.org)

Promise - JavaScript | MDN

동기 방식

코드를 작성한 순서대로 동작하는 방식을 동기 방식(Synchronous) 이라고 한다.

만약 a함수가 모종의 이유로 실행이 지연된다면 다음과 같이 b가 먼저 실행된다.

비동기 방식

위와 같은 상황에서 a()가 실행된 다음 b()가 실행되게 만들고 싶다면, 비동기 방식을 사용해야 한다.

1. Callback 함수

위처럼 a() 함수 내부에 callback 함수로 b()를 호출하게 되면 실행 순서를 보장할 수 있다.

대표적인 콜백함수 사용 예

함수 로직을 모른 채 선언부만 봐도 실행순서를 파악할 수 있다.

콜백 지옥

여러 개의 함수를 비동기 방식으로 사용하게 되면 콜백 함수 내부에 콜백 함수가 들어가는 반복적인 형태의 '콜백 지옥'이 형성된다.

피라미드 형태의 '콜백 지옥'

2. Promise 객체

콜백 지옥을 방지하기 위해서 나온 개념이 Promise이다.

new Promise를 통해서 Promise 객체를 만들 수 있는데, Promise 객체는 await키워드를 사용할 수 있다.

await 키워드는 promise 객체 내부에서 resolve()를 만나기 전까지 로직의 진행을 잠시 멈추는 키워드이다.

axios.get() 또한 로직 내부에 new Promise가 있어 결과로 Promise 객체가 만들어지므로 await 키워드를 사용할 수 있다.

await 키워드는 사용하기 위해서는 해당 키워드가 사용된 함수의 앞부분에 async 키워드를 기술해야 한다.

await 키워드를 이용하면 콜백지옥을 방지할 수 있다.