JavaScript에서 HTTP 요청을 만드는 다양한 방법

이 기사에서는 문서와 튜토리얼에서 얻은 기본 지식을 바탕으로 HTTP 요청을 작성하는 다양한 JavaScript 방법을 살펴봅니다. 몇 가지 실용적인 접근 방식을 살펴보겠습니다.

1. Fetch API: 이전 XMLHttpRequest을 대체하는 최신 내장 JavaScript 메소드입니다. HTTP 요청에 대해 더 깔끔한 Promise 기반 인터페이스를 제공합니다. 핵심 기능인 fetch()는 리소스(예: 서버 데이터)를 검색합니다.

   <code class="language-javascript">fetch (URL, options)</code>

   기본적으로 fetch()에서는 GET을 사용합니다. Response 객체

   로 해석되는 Promise를 반환합니다.

   예(MDN에서 수정):

   <code class="language-javascript">async function getData() {
     const url = "https://example.org/products.json";
     try {
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error(`Response status: ${response.status}`);
       }
       const json = await response.json();
       console.log(json);
     } catch (error) {
       console.error(error.message);
     }
   }</code>

   POST 요청: POST 요청의 경우 method 개체 내에 headers, body 및 options를 지정합니다.

   예(MDN에서 수정):

   <code class="language-javascript">const response = await fetch("https://example.org/post", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ username: "example" }),
   });</code>

   Key Fetch API 기능: Fetch API는 기본적으로 CORS(Cross-Origin Resource Sharing)를 지원하고 자격 증명(쿠키, 인증 데이터)에 대한 세부적인 제어를 제공합니다.

2. Axios: Fetch API에 비해 HTTP 요청을 단순화하는 인기 있고 사용자 친화적인 타사 라이브러리입니다. 동형입니다(Node.js와 브라우저 모두에서 작동).

   POST 예(화살표 기능에 맞게 수정됨):

   <code class="language-javascript">const axios = require('axios');
   
   axios.get('/user?ID=12345')
     .then(response => console.log(response))
     .catch(error => console.log(error))
     .finally(() => {});</code>

3. jQuery.ajax: jQuery 라이브러리의 일부로 레거시 프로젝트에서 흔히 발견됩니다.

   <code class="language-javascript">$.ajax({
     url: 'https://api.example.com/data',
     method: 'GET',
     success: function(data) { console.log(data); },
     error: function(error) { console.error('Error:', error); }
   });</code>

4. WebSocket API: 클라이언트와 서버 간의 지속적인 양방향 통신 채널을 설정하기 위한 내장 JavaScript API입니다. 실시간 애플리케이션(예: 채팅)에 적합합니다.

   예(MDN에서 수정):

   <code class="language-javascript">const socket = new WebSocket("ws://localhost:8080");
   socket.addEventListener("open", (event) => { socket.send("Hello Server!"); });
   socket.addEventListener("message", (event) => { console.log("Message from server ", event.data); });</code>

HTTP 요청의 구문은 언어와 프레임워크(PHP, Next.js 등)에 따라 다르지만 이러한 핵심 JavaScript 메서드를 이해하면 다양한 상황에 적응하기 위한 강력한 기반이 제공됩니다.

위 내용은 JavaScript에서 HTTP 요청을 만드는 다양한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!