[TIL] 자바스크립트 12일차

정인교·2021년 6월 3일

TIL(Today I Learned)

목록 보기

11/67

네트워크 요청

자바스크립트에서 필요시 네트워크 요청을 보내고 데이터를 받아올 수 있는데,
네트워크 요청을 새로고침 없이 가능합니다.
그 이유는 AJAX라는 비동기적으로 정보를 가져올 수 있게 해주는 것 덕분입니다.
그리고 AJAX를 쉽게 사용할 수 있게 해주는 메서드인 fetch를 소개하겠습니다.

fetch

구식브라우저에선 지원이 되지 않지만, 대부분 지원합니다.

let promise = fetch(url, [options])

기본문법은 이러하며,

url – 접근하고자 하는 URL
options – 선택 매개변수, method나 header 등을 지정할 수 있음

option에 아무것도 적지 않는다면 GET메서드로 진행됩니다.
이렇게 fetch를 사용하면 브라우저가 네트워크 요청을 보내고 프로미스가 반환됩니다.

서버에서 응답 헤더를 받으면 본문이 안받아져도 요청 성공 여부를 알 수 있습니다.
응답 프로퍼티의 status와 ok로, ok가 true라면 성공적으로 요청된 걸 알 수 있습니다.

그리고 응답이 끝나고 본문을 받을 때, response의 메서드를 이용하여
다양한 형태로 본문 처리를 할 수 있습니다.

response.text() – 응답을 읽고 텍스트를 반환합니다,
response.json() – 응답을 JSON 형태로 파싱합니다,
response.formData() – 응답을 FormData 객체 형태로 반환합니다.
response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환합니다.
response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.
이 외에도 response.body가 있는데, ReadableStream 객체인
response.body를 사용하면 응답 본문을 청크 단위로 읽을 수 있습니다. 자세한 용례는 곧 살펴보겠습니다.

위 메서드들을 이용하면 본문 처리를 할 수 있습니다.

let url = 'ㅁㄴㅇㄻㄴㄻㄴㅇㄹ';
let response = await fetch(url);

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

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

이렇게 사용하면 JSON형태로 데이터를 받을 수 있습니다.

그렇다면 POST요청은 어떻게 할까요?
아까는 options를 비우면 GET방식이라고 했지만
body를 적어야합니다.

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

위 코드처럼말이죠.