Fetch API 마스터하기: JavaScript에서 HTTP 요청 단순화

자바스크립트 가져오기 API

Fetch API는 HTTP 요청을 만드는 데 사용되는 JavaScript의 최신 Promise 기반 인터페이스입니다. XMLHttpRequest와 같은 이전 메서드를 대체하여 서버에서 리소스를 가져오는 프로세스를 단순화합니다. Fetch는 네트워크 요청 및 응답을 처리하기 위한 더 깔끔하고 읽기 쉬운 접근 방식을 제공하고 Promise, 스트리밍, async/await와 같은 기능을 지원합니다.

---

1. Fetch API의 주요 기능

• Promise 기반: 비동기 작업을 처리하는 보다 우아한 방법을 제공합니다.
• 단순화된 구문: XMLHttpRequest에 비해 더 읽기 쉽습니다.
• 스트리밍 지원: 대규모 응답을 효율적으로 처리합니다.
• 확장 가능: 최신 JavaScript 도구 및 라이브러리와 쉽게 통합됩니다.

---

2. Fetch의 기본 구문

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

3. GET 요청하기

가져오기의 기본값은 GET 메서드입니다.

예:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

4. POST 요청하기

서버로 데이터를 보내려면 옵션 개체의 body 속성과 함께 POST 메서드를 사용하세요.

예:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

5. 공통 가져오기 옵션

가져오기 함수는 요청을 구성하기 위해 옵션 개체를 허용합니다.

Option	Description
method	HTTP method (e.g., GET, POST, PUT, DELETE).
headers	Object containing request headers.
body	Data to send with the request (e.g., JSON, form data).
credentials	Controls whether cookies are sent with the request (include, same-origin).

옵션

---

설명

방법 HTTP 메소드(예: GET, POST, PUT, DELETE). 헤더 요청 헤더가 포함된 개체 본문 요청과 함께 보낼 데이터(예: JSON, 양식 데이터) 자격증명 요청과 함께 쿠키를 전송할지 여부를 제어합니다(포함, 동일 출처).

6. 응답 처리

Method	Description
response.text()	Returns response as plain text.
response.json()	Parses the response as JSON.
response.blob()	Returns response as a binary Blob.
response.arrayBuffer()	Provides response as an ArrayBuffer.

가져오기 호출의 응답 개체에는 데이터를 처리하는 메서드가 포함되어 있습니다. 방법 설명 response.text() 응답을 일반 텍스트로 반환합니다. response.json() 응답을 JSON으로 구문 분석합니다. response.blob() 응답을 바이너리 Blob으로 반환합니다. response.arrayBuffer() 응답을 ArrayBuffer로 제공합니다.

예: JSON 가져오기

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

7. Fetch와 함께 Async/Await 사용

Async/await는 Fetch에서 Promise 처리를 단순화합니다.

예:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

8. 가져오기 오류 처리

XMLHttpRequest와 달리 Fetch는 HTTP 오류에 대한 약속을 거부하지 않습니다. 응답의 ok 속성이나 상태 코드를 확인해야 합니다.

예:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

9. 시간 초과로 가져오기

가져오기는 기본적으로 요청 시간 초과를 지원하지 않습니다. Promise.race()를 사용하여 시간 초과를 구현할 수 있습니다.

예:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

---

10. 비교: Fetch API와 XMLHttpRequest

Feature	Fetch API	XMLHttpRequest
Syntax	Promise-based, simpler, cleaner.	Callback-based, verbose.
Error Handling	Requires manual handling of HTTP errors.	Built-in HTTP error handling.
Streaming	Supports streaming responses.	Limited streaming capabilities.
Modern Features	Works with Promises, async/await.	No built-in Promise support.

특징

---

가져오기 API

XMLHttpRequest 구문

약속 기반, 더 간단하고 깔끔합니다. 콜백 기반, 장황함

오류 처리

HTTP 오류를 수동으로 처리해야 합니다. 내장된 HTTP 오류 처리.

스트리밍

스트리밍 응답을 지원합니다. 제한된 스트리밍 기능.

최신 기능

Promise, async/await와 함께 작동합니다. 내장된 Promise 지원이 없습니다.

---

11. Fetch API를 사용하는 경우

Fetch는 최신 웹 개발 프로젝트에 이상적입니다.

Promise 및 async/await와 원활하게 통합됩니다.
보다 깔끔하고 유지 관리가 쉬운 코드가 필요할 때 사용하세요.

12. 결론 Fetch API는 JavaScript에서 HTTP 요청 작성을 단순화하여 XMLHttpRequest에 대한 보다 현대적이고 읽기 쉬운 대안을 제공합니다. Promise 기반 아키텍처를 사용하면 특히 async/await와 함께 사용할 때 비동기 작업에 더 적합합니다. 현대적이고 동적인 웹 애플리케이션을 구축하려면 Fetch API를 이해하는 것이 필수적입니다. 안녕하세요. 저는 Abhay Singh Kathayat입니다! 저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다. 내 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락해주세요.

위 내용은 Fetch API 마스터하기: JavaScript에서 HTTP 요청 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!