[javascript] 비동기 데이터 요청을 이용한 영화 목록 조회
웹 애플리케이션을 개발하다보면, 사용자의 경험을 향상시키기 위해 데이터를 비동기적으로 불러와야 하는 경우가 많습니다.
이 예제에서는 JavaScript의 fetch API를 사용하여 비동기 데이터 요청을 보내어 영화 목록을 조회하는 방법을 살펴보겠습니다.
fetch API 이용
JavaScript에서 fetch API는 네트워크 요청을 보내고 응답을 다루는 메커니즘을 제공합니다. 이 API를 이용하여 서버에서 영화 목록을 가져와보겠습니다.
async function fetchMovies() {
try {
const response = await fetch('https://api.example.com/movies');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching movies:', error);
}
}
fetchMovies();
위 코드에서 fetchMovies 함수는 비동기로 실행되며, fetch 메소드를 이용하여 영화 목록을 요청합니다. 그리고 나서 response.json()을 이용하여 응답 데이터를 JSON 형태로 파싱하여 가져옵니다.
결과 다루기
서버에서 영화 목록을 성공적으로 가져왔을 때는 response.json() 메소드가 반환하는 Promise를 처리하여 데이터를 다룰 수 있습니다.
에러가 발생하였을 때는 catch 블록에서 에러를 적절히 핸들링할 수 있습니다.
결론
이처럼 fetch API를 이용하면 간단하게 비동기적으로 데이터를 요청하고 응답을 다룰 수 있습니다. 이를 통해 사용자의 경험을 향상시키는 데에 도움이 될 것입니다.