📚 fetch

---

fetch를 이용해 새로고침 없이 서버에 네트워크 요청을 보내고 받아오는 방법을 알아볼 것이다.

💡 기본 문법

let promise = fetch(url, [options])

url: 접근하고자 하는 URL
options: method나 header 등 지정 (default=GET)

💡 단계

let response = await fetch(url); // fetch 호출

if (response.ok) { // 응답 헤더를 받음
	let json = await response.json(); // 응답 본문을 받음
} else {
	alert("HTTP-Error: " + response.status);
}

1. fetch 호출한다.
   브라우저는 네트워크 요청을 보내고 promise를 반환받는다.

2. 서버로부터 응답 헤더를 받는다.
   promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 된다.

   네트워크 문제나 존재하지 않는 사이트에 접속하려는 경우같이 HTTP 요청을 보낼 수 없는 상태에선 promise는 거부 상태가 된다. body는 도착하기 전이지만, 응답 헤더를 보고 요청이 성공적으로 처리되었는지 확인할 수 있는 것이다.

   📌 HTTP 상태
   status - HTTP 상태코드
   ok - boolean 값

3. 응답 본문을 받는다.

   📌 응답 메서드
   response.text(): 텍스트 반환
   response.json(): JSON 형태로 파싱
   response.formData(): FormData 객체 > 형태로 반환
   response.blob(): Blob 형태로 반환
   response.arrayBuffer(): ArrayBuffer 형태로 반환
   response.body: 응답 본문을 청크 단위로 읽을 수 있다.

   📢 본문을 읽을 때 메서드는 딱 하나만 사용할 수 있다.

📚 headers

---

HTTP header는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해준다.

💡 응답 헤더

---

: 응답 헤더는 response.headers에 맵과 유사한 형태(맵X)로 저장된다.

alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

💡 요청 헤더

---

: headers 옵션을 사용하면 fetch에 요청 헤더를 설정할 수 있다.

let response = fetch(protectedUrl, {
  headers: {
    Authentication: 'secret'
  }
});

📌 금지된 헤더
headers를 사용해 설정할 수 없는 것이다. HTTP를 목적에 맞고 안전하게 사용하기 위함이다.

➖ POST 요청

---

GET 이외의 요청을 보내려면 추가 옵션을 사용해야 한다.

• method: HTTP 메서드

• body: 요청 본문

  📌 body는 다음 항목 중 하나여야 한다. - 대부분 JSON

  • 문자열 (JSON 등)
  • FormData 객체 (form/multipart 형태로 데이터 전송을 위해)
  • Blob / BufferSource (바이너리 데이터 전송을 위해)

let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);

📢 본문이 문자열일 때 ➡ Content-Type 헤더가 text/plain;charset=UTF-8로 기본 설정된다.

위 예시에선 JSON을 전송하고 있기 때문에 headers에 제대로 된 Content-Type인 application/json을 설정해 준 것이다.