JavaScript Fetch API를 사용하여 데이터를 가져오는 방법은 무엇입니까?

요즘 JavaScript는 프런트엔드 및 백엔드 코드 작성에 매우 유용합니다. 게다가 가장 널리 사용되는 프로그래밍 언어이기도 하다.

또한 실시간 애플리케이션을 개발하는 동안 다른 서버에서 데이터를 가져와야 합니다. API(애플리케이션 프로그래밍 인터페이스)를 사용하여 다른 서버나 데이터베이스에서 데이터를 가져올 수 있습니다.

여기에서는 자바스크립트를 이용해 데이터를 얻는 다양한 방법을 배워보겠습니다.

fetch() 메소드를 사용하세요

fetch()는 브라우저가 API에서 데이터를 가져오는 데 사용하는 메서드입니다. 데이터를 가져오는 데 필요한 첫 번째 매개변수로 API URL을 사용하고 두 번째 매개변수로 옵션을 사용합니다. 이러한 옵션에는 헤더와 인증 토큰이 포함될 수 있습니다.

문법

사용자는 다음 구문을 사용하여 fetch()를 사용하여 데이터를 얻을 수 있습니다.

으아악

위 구문에서 baseURL은 데이터를 가져오는 API입니다.

예 1

아래 예시에서는 사용자가 버튼을 클릭하면 fetchData() 함수가 실행됩니다. fetchData() 함수에서는 fetch() 메서드를 사용하여 API에서 데이터를 가져옵니다. 그 후 응답과 오류를 처리했습니다. 사용자는 API에서 얻은 데이터를 출력에서 ​​볼 수 있습니다.

으아악

axios npm 패키지 사용

axios는 개발자가 GET, POST, PUT 등과 같은 요청을 통해 API와 상호 작용할 수 있게 해주는 NPM 패키지입니다. 여기서는 axios를 사용하여 JavaScript로 데이터를 가져오기 위해 GET 요청을 수행합니다.

문법

사용자는 axios를 사용하여 아래 구문에 따라 API에서 데이터를 가져올 수 있습니다.

으아악

위 구문에서는 axios.get() 메서드를 사용하여 API에서 데이터를 가져왔습니다.

예 2

이 예에서는 서버나 데이터베이스에서 얻은 then() 및 catch() 블록을 사용하여 Promise를 해결합니다. then() 블록의 데이터와 catch() 블록의 오류를 활용합니다.

으아악

예 3

아래 예에서는 axios를 사용하여 async/await 구문을 통해 데이터를 가져옵니다. getData() 함수를 비동기식으로 만들었습니다. 또한 API로부터 응답을 받을 때까지 함수 실행을 일시 중지하기 위해 axios의 wait 키워드를 사용했습니다.

으아악

XMLHttpRequest 웹 API 사용

XMLHttpRequest 웹 API를 사용하면 데이터를 가져오는 모듈을 만들 수 있습니다. XMLHttpRequest를 사용하여 객체를 생성하고 초기화할 수 있습니다. 그런 다음 이 개체를 사용하여 GET 요청을 열 수 있습니다.

이후 XMLHttpRequest가 로드되면 콜백 함수를 호출할 수 있습니다. 콜백 함수는 응답 상태를 가져오고 이에 따라 응답이나 오류를 반환할 수 있습니다.

문법

으아악

위 구문에서는 먼저 open() 메서드를 사용하여 요청을 연 다음 onload 이벤트를 사용하여 API의 응답을 처리합니다.

예 4

아래 예에서는 API에서 데이터를 가져오기 위해 XMLHttpRequest() 웹 API를 사용하여 사용자 정의 모듈을 만들어야 합니다. customRequest() 함수에는 사용자 정의 모듈이 포함되어 있습니다.

이후 URL을 매개변수로 전달하여 customRequest() 함수를 호출하고 then() 블록을 사용하여 customRequest() 함수에서 반환된 Promise를 해결합니다.

으아악

우리는 API에서 데이터를 얻는 세 가지 방법을 배웠습니다. 가장 좋은 방법은 브라우저의 fetch() 메서드를 사용하는 것입니다. 이를 사용하기 위해 모듈을 설치할 필요가 없기 때문입니다. 또한 사용자는 async/await 구문이 포함된 모든 모듈을 사용해야 합니다.

위 내용은 JavaScript Fetch API를 사용하여 데이터를 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!