[JavaScript] Fetch API 란?

Fetch API?

JavaScript 에서 네트워크 요청을 보낼 때 사용하는 기본 API

 

과거 XMLHttpRequest 를 사용했으나 코드가 복잡해 가독성이 저하되는 문제가 말생했었다. 이를 개선하기 위해 Fetch API가 등장했는데 Promise 기반으로 비동기 요청을 훨씬 더 깔끔하게다룰 수 있다.

---

1. Fetch API 기본 문법

fetch('url', option)
.then(response => response.json()) // 응답을 JSON으로 변환
.then(data => conosole.log(data)) // 변환 데이터 출력
.cath(error => console.error('Error:', error)); // 에러처리

✅ fetch(URL) : 저장된 URL로 네트워크 요청 보냄

✅ response.json() : 응답(JSON 문자열)을 JavaScript 객체로 변환

✅ .then(data => console.log(data)) : 반환 데이터 콘솔에 출력

✅ .catch(error => console.error('Error:', error)) : 요청이 실패했을 때 에러 처리

 

fetch를 통해 웹 브라우저에게 해당 서버 주소로 요청을 하고 요청이 끝나고 나서 .then 을 실행한다.

 

기본적으로 http 메소드 중 GET으로 동작(default)하며 개발자모드>네트워크에서 Fetch 를 통해 얻어온 데이터 확인이 가능하다.

---

2. Fetch의 속성 response

fetch 를 통해 서버로부터 요청 받으면 .then을 통해 값을 받을 수 있는데 여기서 response 를 보면 모든 응답에 대한 내용을 담고 있음을 확인할 수 있다. 즉, reaponse 에서 필요한 변수값 혹은 메서드를 뽑아내어 값을 얻으면 된다.

→ response가 담고 있는 정보

---

3. 데이터 꺼내는 방법

fetch를 사용하여 서버에서 데이터를 요청하면 Response 객체가 반환된다.

Response 객체에서 .json() 메서드를 호출하면 JSON 형태의 데이터를 추출할 수 있으며, 해당 과정은 비동기로 이루어지기에 .then()을 사용하여 데이터를 받아와 활용이 가능하다.

 

fetch를 통해 요청하는 응답 형태에 따라 response 속성을 달리해야 하는데 속성은 다음과 같다.

1) response.text() : 텍스트 데이터 처리 → 일반 문자열로 변환

2) response.blob() : 이미지 파일 데이터 처리

3) response.formData() : HTML 폼 데이터 처리

4) response.status : HTTML 상태 코드

5) response.arrayBuffer : 이진데이터 변환 (이미지, 음성 파일, 동영상 PDF)

6) response.ok : HTTP 상태 코드 200~299 → true, 그 외 false

7) response.json() : 응답 JSON 형태로 파싱 → JSON 데이터를 자바스크립트 객체로 변환하는 메서드

응답 형태는 해당 서버의 content-type을 확인하면 알 수 있다.

→ 개발자모드 > network > Header > Response Header > content-type

---

4. fetch 활용

버튼을 통해 fetch 에서 요청한 값을 불러오는 코드로 불러오기 버튼을 누르면 영화 제목이 위처럼 불러올 수 있다.

test2.json 은 배열 형태로 되어 있으며 ForEach를 통해 불러 왔다.

---

5. Fetch API 와 HTTP 메서드 사용하기

✅ HTTP Method : 클라이언트가 서버에 요청 보낼 때 사용하는 방법

1) Post (Create) : 새로운 데이터를 서버에 생성할 때 사용

→ 사용자가 회원가입할 때 입력한 정보를 서버에 저장할 때 사용

 

2) Get (Read) : 서버에서 데이터를 조회하거나 가져올 때 사용

→ 사용자가 웹페이지를 요청할 때 그 페이지의 내용을 서버로부터 가져오는 데 사용

 

3) PUT (Update) : 기존 데이터를 수정할 때 사용

→ 사용자가 기존의 프로필 정보를 업데이트할 때 해당 데이터를 수정하는 데 사용

 

4) DELETE (Delete) : 서버에서 데이터 삭제할 때 사용

→ 사용자가 자신의 계정 삭제 혹은 게시물 삭제할 때 사용

 

(1) GET Method 사용 (기본값)

fetch 함수에서 디폴트로 작동하는 방식으로 옵션 인자를 별도로 필요로 하지 않는다.

fetch(`URL`)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error :', error));

 

(2) POST Method 사용 (데이터 전송)

개인 정보나 보내는 데이터 양이 많을 경우 사용하며, POST 요청을 보낼 경우, method 와 body를 추가해야 한다.

method : "HTTP Method"

header : 요청 헤드가 담긴 객체

body : 보내고자하는 데이터

fetch(`URL`, {
    method: 'POST',
    header: {
    	'Content-Type' : 'appliaction/json' // JSON 형식으로 데이터 전송
    },
    body: JSON.stringify({ // 자바스크립트 객체 JSON 변환
    	title: 'Hello Fetch',
        body: 'This is a fetch API example.',
        userId: 1
    })
})
	.then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

header : { 'Contend-Type' : 'application/json'} 의 경우 JSON 데이터 전송을 위한 설정이며 body : JSON.stringify({...}) 은 전송할 데이터를 JSON 문자열로 변환함을 의미한다.

 

(3) PUT Method 사용 (데이터 전체 수정)

fetch('URL', {
	method: 'PUT',
    header: {
    	'Content-Type': 'application/json'
    },
    body: JSON.stringify({
    	title: "수정된 제목",
        content: "수정된 내용"
    })
})
.then(response => {
	if(!response.ok) throw new Error(`에러 발생! 상태 코드: ${response.status}`;
    return response.json();
})
.then(data => console.log('수정 완료!', data))
.catch(error => console.error('에러:', error));

Post 메서드와 거의 동일하며 PUT의 경우 전체 데이터를 body로 교체하여 JSON 형태로 변환하여 보낸다.

 

(4) PATCH Method 사용 (데이터 일부 수정)

fetch('URL', {
	method: 'PATCH',
    header: {
    	'Content-Type': 'application/json'
    },
    body: JSON.stringify({
    	title: "제목만 수정"
    })
})
.then(response => {
	if(!response.ok) throw new Error(`에러 발생! 상태 코드: ${response.status}`;
    return response.json();
})
.then(data => console.log('수정 완료!', data))
.catch(error => console.error('에러:', error));

PATCH의 경우 body의 title만 수정하고 나머지는 그대로 유지한 채 JSON으로 변환하여 보낸다.

 

(5)  DELETE Method 사용 (데이터 삭제)

fetch('URL', {
	method: 'DELETE'
})
	.then(response => {
    	if(!response.ok) throw new Error(`삭제 실패 상태 코드 : ${response.status}`);
        console.log('삭제 완료!');
    })
    .catch(error => console.error('에러:', error));

서버에서 해당 데이터를 삭제하는 메서드로 header 와 body 가 필요없다.

또한 특정 API의 경우 추가 데이터를 보낼 수 있다.