자바스크립트 가져오기 API

__del__ | __delete__ | exp | JavaScript | log | sin | system

Michael Zippo

개발자는 종종 자체 API 또는 타사 API에서 데이터를 검색해야 합니다. 이 기사에서는 브라우저 Fetch API를 사용하여 엔드포인트에서 데이터를 가져오는 방법에 대해 설명합니다.

Fetch API는 Chrome 또는 Firefox와 같은 웹 브라우저에서 서버로 HTTP 요청을 보낼 수 있는 인터페이스입니다. GET 요청은 서버의 끝점에 도달한 다음 읽을 수 있도록 해당 끝점의 데이터와 함께 응답을 반환합니다.

요청 유형

HTTP GET 요청은 하나일 뿐입니다. 서버에 요청할 수 있는 유형입니다. 다른 유형의 요청은 POST, PUT 및 DELETE입니다. 이러한 요청은 CRUD 요청을 합니다. 여기에서 데이터베이스의 데이터를 생성(POST), 읽기(GET), 업데이트(PUT) 및 삭제(DELETE)할 수 있습니다.

또한 타사 API에 액세스할 수 있습니다. . API에 따르면, 주로 데이터를 변경할 수 없도록 유지하기 위해 특정 쿼리만 실행할 수 있으므로 데이터를 조작하는 쿼리는 실행할 수 없으며 읽을 수만 있습니다.

Fetch API는 어떻게 작동합니까?

Fetch API는 Promise 기반 통신 시스템을 사용합니다. 다시 말씀드리지만 프라미스는 자체 코드 블록에 로직을 래핑하고 프라미스가 해결 또는 거부되었는지 여부를 결정하는 응답을 반환하는 비동기 함수입니다.

Fetch API 사용자로서, 당신은 우리를 노출하지 않습니다 실제로 약속의 논리를 작성할 필요가 없습니다. 요청을 보내는 데 사용하기만 하면 Fetch API가 숨겨진 약속을 반환합니다. 다음은 답을 얻기 위한 기본 구문입니다.

promise.then(응답) .then(json) .catch(오류) ;

약속은 비동기식 요청입니다. fetch() 메서드는 전역 범위에서 사용할 수 있으며 HTTP 요청을 수행하려는 엔드포인트로 전달됩니다.

요청 후, then과 약속한 구문을 사용하고 서버로부터 응답을 받기 위해 catch 또는 async/wait 함수를 사용할 수 있습니다.

Promise 구문

여기서 약속을 취하고 응답을 기다립니다. 응답을 받았을 때 상태 코드가 200과 다르면 콘솔에 오류 코드를 기록하고 기능을 종료합니다.

그렇지 않으면 응답을 읽을 수 있도록 하여 프런트엔드 웹사이트에서 사용할 수 있으면 json () 를 사용하여 JSON(JavaScript Object Notation) 개체로 변경합니다. 계속 진행하기 전에 이것을 평가하기를 원하므로 프라미스를 이전 프라미스에 연결해 보겠습니다.

평가가 완료되면 콘솔에서 이를 확인하는 데 소요된 비용을 기록할 수 있습니다. 팔로우하면 다음과 같이 표시됩니다.

 프론트엔드에서 이 정보를 얻으면 카드나 표를 채우는 데 이 정보를 사용하거나 다른 방법으로 표시할 수 있습니다.

 Async / Await 
 async / wait 기능을 사용하여 동일한 결과를 저장할 수도 있습니다.
 
 키워드 async는 `이 함수의 일부가 비동기식일 것임을 알려줍니다. wait 키워드에 도달하면 스크립트 실행 이 코드 줄이 평가될 때까지 멈춥니다.
이 함수에는 두 개의 then() 문과 유사한 두 개의 wait 문이 있습니다 우리는 약속 로직에 있었습니다. 우리가 브라우징한 url과 th 가져온 정보가 JSON으로 구문 분석될 때까지 기타. try / catch를 사용하여 응답에서 비정상적인 것이 반환될 경우 발생할 수 있는 오류를 포착합니다.
미주
Fetch API가 작동하려면 노드 환경에서(즉, Visual Studio Code와 같은 IDE를 사용하는 경우) 가져오기는 브라우저 환경에서만 작동하기 때문에  wire add 또는 npm install node-fetch가 필요합니다. .

자바스크립트 가져오기 API

요청 유형

Fetch API는 어떻게 작동합니까?

Promise 구문

Async / Await

미주

Shop

News

Wiki