Fetch API

0. 들어가기

Fetch API는 Ajax를 대체하기 위해 ES6 (ECMAScript 2015)에서 도입된 비동기 네트워크 통신을 위한 기술이다.

Fetch API에 대해 알아보자.

 

 

1. Fetch란?

Fetch는 웹 브라우저에서 제공하는 자바스크립트 API로, 비동기 네트워크 요청을 보내고 응답을 처리하는 기능을 제공하는 것이다.

Fetch API는 ES6(ECMAScript 2015)에서 도입되었으며, Ajax(XMLHttpRequest)보다 더 직관적이고 간결한 코드를 작성할 수 있도록 설계되었다.

(ES6은 자바스크립트 언어의 표준 규격을 정의하는 표준화 기구인 ECMA International에서 관리되는 스크립팅 언어인ECMAScript의 6번째 버전을 의미한다.)

 

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공하는데, 이는 기존의 XMLHttpRequest보다 사용하기 쉽고, 더 직관적이다.

 

Fetch API는 Promise 기반으로 동작하여, 더 간결한 코드를 작성할 수 있다.

 

 

1.1 fetch() 전역 함수

fetch()는 Fetch API가 제공하는 전역 함수이다.

네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있다.

 

 

2. 간단한 Fetch API 사용 예시

새로운 Request 객체를 생성자로 생성하고, fetch() 호출로 취득한다.

이미지를 취득하고 있으므로, 요청을 올바르게 처리할 수 있도록 Response.blob() (en-US) 메서드를 호출해 적합한 MIME 유형을 부여하고, 객체 URL을 생성해 <img> 요소로 화면에 그린다.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP 오류! 상태: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

 

GET과 POST요청

// GET 요청 보내기
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 서버로부터 받은 JSON 데이터 출력
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST 요청 보내기
const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'john_doe', password: 'secure_password' })
};

fetch('https://api.example.com/login', requestOptions)
  .then(response => response.json())
  .then(data => {
    console.log(data); // 로그인 결과 데이터 출력
  })
  .catch(error => {
    console.error('Error:', error);
  });

 

 

---

출처 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

Fetch API - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/fetch

fetch() 전역 함수 - Web API | MDN