javascript 네트워크 요청하고 데이터를 가져오는 fetch에 대하여 알아봅시다.

fetch는 JavaScript에서 네트워크 요청을 보내고 데이터를 가져오기 위해 사용하는 최신 API입니다. XMLHttpRequest를 대체하는 간결하고 사용하기 쉬운 방식으로 설계되었습니다. fetch는 비동기적이며 Promise 기반이기 때문에, 비동기 작업을 더 간단하고 명확하게 작성할 수 있습니다.

 

fetch와 axios, ajax가 있지만 fetch는 기본내장되어 있고 axios는 추가로 설치가 필요하고 ajax는 요즘 jquery를 많이 사용하지 않는 분위기이고 저희 회사에서는 퇴출 분위기라서 fetch를 주로 사용합니다.

 

기본적인 하나만 명심하시고 사용하시면 됩니다.

axios의 경우는 리터값이 에러일 경우는 catch부분으로 빠지는데 

fetch의 경우는 최악의 404에러가 발생하여도 서버에서 값이 온다면 catch로 구분되지 않고

if (response.ok) {
	console.log(response);
	alert('Success!');
} else {
	alert('Error!');
}

이런식으로 response.ok값을 반듯이 체크해야합니다.

 

 

전반적인 fetch에 대햐여 알아봅시다.

기본 문법

 

fetch(url, options)
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

 

• url: 요청을 보낼 URL.
• options: HTTP 메서드, 헤더, 요청 본문 등 추가 설정을 담은 객체(선택 사항).

주요 특징

1. Promise 기반: fetch는 Promise를 반환하며, 비동기 처리에 유용합니다.
2. 요청/응답 스트림 처리: JSON, 텍스트, Blob, FormData 등의 형식으로 응답을 처리할 수 있습니다.
3. 에러 처리: 네트워크 오류는 .catch로 처리되며, HTTP 상태 코드 오류는 자동으로 throw되지 않으므로 수동으로 확인해야 합니다.

---

기본 사용법

GET 요청

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답이 올바르지 않습니다.');
    }
    return response.json(); // JSON 데이터를 파싱
  })
  .then(data => {
    console.log(data); // 파싱된 데이터 사용
  })
  .catch(error => {
    console.error('요청 중 문제가 발생했습니다:', error);
  });

 

POST 요청

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John',
    age: 30,
  }),
})
  .then(response => response.json())
  .then(data => {
    console.log('서버 응답:', data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

 

---

주요 옵션 설명

1. method

• HTTP 메서드를 설정합니다. 기본값은 GET입니다.
• 예: 'GET', 'POST', 'PUT', 'DELETE'

method: 'POST'

2. headers

• 요청에 포함할 헤더를 설정합니다.
• 예: Content-Type, Authorization

headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token',
}

 

3. body

• 요청 본문을 설정합니다. POST, PUT 요청에서 주로 사용됩니다.
• 데이터는 문자열이나 FormData 객체 등으로 전송할 수 있습니다.

body: JSON.stringify({ key: 'value' })

 

4. mode

• 요청 모드를 설정합니다. 기본값은 cors입니다.
• 값:
  • 'cors': 교차 출처 요청 가능
  • 'no-cors': 교차 출처 요청 제한
  • 'same-origin': 동일 출처 요청만 허용

mode: 'cors'

 

5. credentials

• 쿠키와 인증 정보를 전송할지 설정합니다.
• 값:
  • 'same-origin': 동일 출처 요청에서만 쿠키 포함
  • 'include': 모든 요청에 쿠키 포함
  • 'omit': 쿠키를 포함하지 않음

credentials: 'include'

---

응답 처리

응답 객체의 주요 속성

fetch가 반환하는 response 객체는 다음과 같은 속성을 가집니다.

• ok: 응답 상태가 성공(200-299) 범위에 있으면 true.
• status: HTTP 상태 코드 (예: 200, 404).
• statusText: 상태 메시지 (예: OK, Not Found).
• json(): JSON 데이터를 파싱하는 메서드.
• text(): 응답 본문을 문자열로 가져오는 메서드.
• blob(): 바이너리 데이터를 Blob 형태로 가져오는 메서드.

예시: JSON 응답 처리

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 오류! 상태 코드: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

 

---

에러 처리

fetch는 네트워크 오류만 catch로 처리하며, HTTP 오류(예: 404, 500)는 자동으로 throw되지 않습니다. 따라서 response.ok를 수동으로 확인해야 합니다.

예시: 에러 처리

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP 오류 발생: ' + response.status);
    }
    return response.json();
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

 

---

참고 사항

1. fetch는 브라우저에 내장되어 있으며 추가적인 라이브러리 설치가 필요 없습니다.
2. IE는 fetch를 지원하지 않으므로 구형 브라우저 호환이 필요하면 polyfill(예: whatwg-fetch)을 사용해야 합니다.
3. CORS 정책을 이해하고 요청을 설계해야 합니다.