2022. 3. 28. 23:46ㆍ공부/Vue.js
참고) axios - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
axios - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Promise based HTTP client for the browser and node.js - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Clou
cdnjs.com
Axios cdn을 검색하면 다음과 같은 페이지가 나온다.
위의 빨간색 부분을 복사하여 index.html에 붙여넣는다. (main.js 위에)
영화 제목 검색 예제
위의 내용은 영화 제목을 검색하는 예제이다. (기존 영화 검색 사이트 예제와는 별개의 예제)
await는 콜백함수 내부에 기술돼 있으므로 콜백함수 앞부분에 async 키워드를 기술한다.
영화 검색 요청을 axios.get을 통해 하게되면, await 키워드를 통해 검색 요청이 마무리 된 후 console.log(res)가 실행된다.
resolve(res) 추가
위의 예제에서 console.log(res) 대신 resolve(res)를 하게 된다면,
fetchMovies는 영화 검색 결과 정보 객체인 res를 가지고 있는 Promise 객체를 내보내게 된다.
여기서 주의할 점은 test는 동기방식으로 작동하므로 fetchMovies가 완전히 실행되기 전에
console.log(res)를 실행해버린다는 점이다.
따라서 결과로 미완성의 Promise 객체가 출력된다.
함수를 호출하는 부분에 똑같이 await를 붙여주게 되면 온전한 결과가 나타나게 된다.
오류제어
위와 같은 방식으로 try-catch 구문을 이용한 오류제어를 실행할 수 있다.
'공부 > Vue.js' 카테고리의 다른 글
| [Vue.js] 영화 검색 사이트 예제 - 16. 영화 아이템_기본 출력 (0) | 2022.04.02 |
|---|---|
| [Vue.js] 영화 검색 사이트 예제 - 15. 영화 검색 코드 리팩토링 (0) | 2022.03.30 |
| [Vue.js] 영화 검색 사이트 예제 - 13. 비동기_예외 처리(then, catch, finally) (0) | 2022.03.28 |
| [Vue.js] 영화 검색 사이트 예제 - 12. 비동기_콜백과 프로미스 객체의 이해 (0) | 2022.03.28 |
| [Vue.js] 영화 검색 사이트 예제 - 11. 영화 목록에서 ID 중복 제거 (0) | 2022.03.28 |