[Vue.js] 영화 검색 사이트 예제 - 13. 비동기_예외 처리(then, catch, finally)

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

Promise - JavaScript | MDN

Promise 자체는 EcmaScript 2015(ES6) 버전에 출시됐으며,

async와 await 키워드는 EcmaScript 2017(ES8) 버전에 출시됐다.

따라서 async와 await 키워드를 사용할 수 없는 상황에서는 위의 인스턴스 메소드를 사용한다.

 

then

a()는 promise 객체를 반환하므로, 메소드 체이닝을 이용하여 기술할 수 있다.

그러나 이 방법을 이용하여 계속 작성하게 되면 콜백지옥이 형성된다.

여기서 주목할 점은 a().then()을 통해서 나온 결과 또한 Promise 객체이므로 a().then().then()이 가능하다는 점이다.

따라서 다음처럼 작성하여 콜백 지옥을 회피할 수 있다.

화살표함수에서는 중괄호와 return 키워드를 생략할 수 있으므로 좀 더 축약하면 다음과 같이 만들 수 있다.

reject

promise 객체의 내부 로직 실행을 거부할 때 사용한다.

보통 reject의 실행을 감지하는 catch와 함께 사용한다.

위의 로직의 의도는 다음과 같다.

- a의 인수인 number가 4 이하일 때 setTimeout() 함수를 실행. resolve를 통해 .then문이 실행.

- number가 4를 초과하면 reject()를 통해 .catch문이 실행.

 

그런데 결과를 살펴보면 Reject가 실행됐는데 console.log('A')가 같이 실행되었다.

그 이유는 reject()는 그 자체만으로는 Promise 객체의 내부 로직 실행을 막을 수 없기 때문이다.

따라서 return 키워드와 같이 사용해야 한다.

 

finally

resolve나 reject가 실행에 관계없이 실행된다.

 

async - await 패턴

reject와 finally를 async - await 패턴으로 구성하려면 어떻게 해야할까?

바로 try-catch 구문을 사용하면 된다.

catch는 위의 try 구문에서 error가 발생하면 그것을 감지하여 실행되는 구문이다.

finally는 똑같은 의미로 사용한다.