fetch

Posted on In

fetch

AJAX - 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 의미함. (새로 고침 없이)

AJAX 이외에도 서버에 네트워크 요청을 보내고 정보를 받아올 수 있는 다양한 방법이 존재하는데 그 중 하나인 fetch에 대해서 알아본다.

1
let promise = fetch(url, [options]);
  • url : 접근하고자 하는 url
  • options : 선택 매개변수, method나 header 등을 지정할 수 있다.

options에 아무것도 넘기지 않으면 GET으로 동작한다.

서버에서 응답 헤더를 받자마자 fetch 호출 시 반환받은 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 된다. 아직 본문이 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 아닌지를 확인할 수 있다.

HTTP 응답 상태는 프로퍼티를 사용해 확인할 수 있다.

  • status - HTTP 상태 코드 값 (ex. 200)
  • ok - 불린 값, HTTP 상태 코드가 200 과 299 사이일 경우 ture
1
2
3
4
5
6
7
let response = awiat fetch(url);

if (response.ok) {
	let json = await reponse.json();
} else {
	alert("HTTP-Error: " + response.status);
}

response에는 프라미스를 기반으로 하는 다양한 메서드가 있다. 이 메서드를 사용하면 다양한 형태의 응답 본문을 처리할 수 있다.

  • response.text() - 응답을 읽고 텍스트로 반환해 줌.
  • response.json() - 응답을 읽고 JSON으로 파싱해 줌
  • response.formData() - 응답을 FormData 객체 형태로 반환함.
  • response.blob() - 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환 함.
  • response.arrayBuffer() - 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것)
  • 이 외에도 respose.body가 있는데 청크 단위로 읽을 수 있게 해준다.
1
2
3
4
5
6
7
let url =
  "https://api.github.com/repos/javascript-tutorial/ko.javascript.info/commits";
let response = await fetch(url);

let commits = await response.json(); // 응답 본문을 읽고 JSON 형태로 파싱함

alert(commits[0].author.login);

본문을 읽을 때 사용되는 메서드는 딱 하나만 사용할 수 있다. response.text() 를 사용해 응답을 얻었다면 본문의 콘텐츠는 모두 처리된 상태이기 때문에 response.json()은 동작하지 않는다.

응답 헤더

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

1
2
3
4
5
6
7
8
9
10
11
let response = await fetch(
  "https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits"
);

// 헤더 일부를 추출
alert(response.headers.get("Content-Type")); // application/json; charset=utf-8

// 헤더 전체를 순회
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

요청 헤더

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

1
2
3
4
5
let response = fetch(protectedUrl, {
  headers: {
    Authentication: "secret",
  },
});

POST 요청

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

  • method - ex.POST
  • body - 요청 본문, 다음 중 하나여야 한다.
    • 문자열(ex. JSON 문자열)
    • FormData 객체 - form/multipart
    • Blob이나 BufferSource - 바이너리 데이터 전송을 위해 사용됨
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let user = {
  name: "John",
  surname: "Smish",
};

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 reponse.json();

본문이 문자열일 때는 Content-Type - text/plain;charset-UTF-8 이 기본으로 설정됨. 하지만 위에 예시에서는 JSON 이기 때문에 따로 설정을 해주었다.