HTTP 요청

개요 HTTP

HTTP는 Hypertext Transfer Protocol의 약자이며 인터넷을 통해 요청 및 응답을 구조화하는 데 사용됩니다. HTTP는 네트워크를 통해 한 지점에서 다른 지점으로 데이터를 전송해야 합니다. TCP 채널은 이러한 연결을 만드는 기본 수단입니다. 다음은 추상화가 없는 순수한 바닐라 HTTP 서버에 들어가는 문서입니다Article Vanilla Server.

이런 식으로 일을 처리하는 데 아무런 문제가 없습니다. 훨씬 더 많은 코드이며 네트워크 및 how HTTP works 및 XMLHttpRequests에 대해 더 깊이 이해해야 할 수도 있습니다.
말할 필요도 없이 저는 이러한 것들을 오히려 추상화하고 시간이 지남에 따라 또는 절대적으로 알아야 할 때 배웁니다.

바닐라 요청 예시

나는 이것을 HTTP 라이브러리가 없는 XHR 바닐라의 작은 예제로 만들려고 노력했지만 지나치게 복잡하지는 않았습니다. 나중에 Fetch의 유용성을 강조할 수 있기를 바랍니다.

const XHR = new XMLHttpRequest();

XHR.onload = function XHRcall() {
  try {
    if (XHR.status >= 200 && XHR.status < 300) console.log(`success!`, XHR.response);
  } catch (error) {
    console.log(`The request failed!`, error);
  }
};
// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
XHR.open(`GET`, `https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699`);
XHR.send();

브라우저 콘솔에 직접 붙여넣기하면 작동합니다.
다음은 브라우저 콘솔에서 직접 구현한 것입니다. 생성된 XHR 개체를 기록하는 콘솔이 불필요하지 않도록 코드 스니펫을 수정했습니다. 브라우저 콘솔의 스니펫에 복사하여 붙여넣기만 하면 됩니다. 😁

Fetch가 들어오는 곳...

다른 옵션이 있습니까? 물론! Axios, superagent, Request... 몇 가지 예를 들자면. 그들은 모두 장단점이 있습니다. Fetch 이외의 것을 선택해야 한다면 약속된 기능이 있는 클라이언트인 Axios가 될 것입니다. 그렇다면 가져오기를 사용하는 이유는 무엇입니까? 큰 이점은 기본 브라우저 API이므로 많은 브라우저에서 철저히 지원된다는 것입니다. 글쎄, 가져오기는 원래 프런트엔드(브라우저 측)에서만 사용할 수 있었지만 Node.js에서 Fetch를 사용하기 위해 node-fetch 존재하며 이제 프런트엔드 또는 백엔드에서 원활하게 사용할 수 있습니다.

가져오기 및 혜택 개요

유연하고 매우 잘 문서화되어 있습니다.

매끄럽고 깔끔한 구문을 가지고 있습니다.

약속 또는 비동기/대기를 활용할 수 있습니다. (나는 async/await를 선호합니다)

모든 최신 브라우저는 아니지만 대부분의 최신 브라우저에서 지원됩니다.

요청-응답 방식을 따릅니다.

예제 가져오기

import fetch from "node-fetch";

// More configs can be added to the headers from the 2nd argument object.
// Here I just explicitly set method to GET request. 
const response = await fetch(
  `https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699`,
  { method: `GET` }
);
const myJson = await response.json();
console.log(JSON.stringify(myJson));

작은 Nodejs 예제에서 로컬로 실행했습니다.


🚧 🚧 🚧 계속하려면...? 🚧 🚧 🚧
🚨 이 기사에 대한 후속 조치로 작은 JSON 익스프레스 서버를 생성하고 Fetch to GET & POST 데이터를 "엔드포인트"에 추가하여 최소한 직접 조치 중인 요청을 표시할 수 있습니다. 🚨