Node.js에서 AJAX 호출

‘Representational State Transfer’를 ‘REST’라고 합니다. ‘REST’ 아키텍처 스타일의 제한 및 제한 사항을 준수하고 RESTful 웹 서비스와의 상호 작용을 허용하는 API 또는 웹 API(Application Programming Interface)를 ‘REST’ API 또는 ‘RESTful’ API라고 합니다.

오늘 게시물에서는 Node.js를 사용하여 타사 패키지를 사용하여 요청하는 방법을 알아봅니다.

Node.js에서 AJAX 호출

node-fetch는 Node.js에서 fetch() 기능을 사용할 수 있게 해주는 경량 패키지/모듈입니다. 그 기능은 Vanilla JavaScript의 window.fetch()와 매우 유사합니다.

node-fetch는 브라우저 및 Node.js용 Promise 기반 HTTP 클라이언트인 무료 타사 패키지입니다. NPM에서 사용할 수 있습니다.

node-fetch를 사용하여 REST 엔드포인트에 비동기 HTTP 요청을 보낼 수 있습니다. CRUD 작업 수행은 node-fetch를 사용하는 쉬운 작업이 됩니다.

Vanilla JavaScript 또는 Node.js 또는 React와 같은 라이브러리에서 이것을 사용할 수 있습니다. node-fetch여기에 대한 자세한 정보를 찾을 수 있습니다.

HTTP GET 메소드는 서버에서 리소스를 가져옵니다. 예를 들어, 브라우저는 서버에서 TODO 데이터 목록을 가져오거나 특정 TODO 요청 정보를 가져올 때 HTTP GET 요청 방법을 사용합니다.

GET 및 HEAD 요청은 서버의 상태를 변경하지 않습니다.

GET API는 멱등적(idempotent)입니다. 즉, POST 또는 PUT과 같은 다른 API가 서버에 대해 수행되어 서버의 리소스 상태가 변경될 때까지 여러 개의 동일한 요청을 하면 항상 동일한 결과가 생성됩니다.

$ npm i node-fetch 명령을 사용하여 node-fetch 라이브러리를 설치합니다.

GET 요청은 get 메소드로 생성됩니다.

const fetch = require('node-fetch');
async function getTodoData() {
  const payload = {title: 'Hello World', body: 'Welcome to Node tutorial'};
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'post',
    body: JSON.stringify(payload),
    headers: {'Content-Type': 'application/json'}
  });
  const data = await response.json();
  console.log(data);
}
getTodoData();

위의 예에서 사용자가 파일을 실행하면 지정된 URL(이 게시물의 더미)과 함께 fetch 모듈을 사용하여 GET 호출이 노드 서버로 전송됩니다. 서버가 중단 없이 이 데이터를 처리하면 성공 메시지를 반환합니다.

서버 응답의 출력에 따라 콘솔에 메시지를 인쇄하거나 적절한 메시지로 사용자에게 알릴 수 있습니다.

Node.js를 지원하는 replit에서 위의 코드 조각을 실행해 봅니다. 아래에 결과가 표시됩니다.

{ title: 'Hello World', body: 'Welcome to Node tutorial', id: 101 }

데모