fetch

Vorhandenheit ·2021년 10월 12일
0

JS.코어

목록 보기
29/29
post-custom-banner

fetch

fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환

기본 문법

let promise = fetch(url, [options])
  • url : 접근하고자 하는 URL
  • options : 선택 매개변수, method나 header등을 지정할 수 있음
    options에 아무것도 넘기지않으면 요청은 GET메서드로 진행, url로 콘텐츠 다운로드됨

1. 응답

첫 번째 단계

  • 서버에서 응답 헤더를 받자마다 fetch 호출 시 반환받은 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 됨
  • 아직 본문이 도착하기 전!
let response = await fetch(url); //http 상태 코드가 200~299일 경우 응답 본문을 받음

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

두 번째 단계

  • 추가 메서드를 호출해 응답 본문을 받음

response.text() : 응답을 읽고 텍스트를 반환
response.json() : 응답을 JSON 형태로 파싱
response.formData() : 응답을 FormData 객체 형태로 변환
response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환
response.arrayBuffer() : 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식) 형태로 반환

fetch(url).then(response => response.json()).then(commits => aleert(commits[0].author.login));

주의!

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

1)응답 헤더

응답 헤더는 response.headers에 맵과 유사한 형태로 저장됨(맵은 아니지만 맵과 유사한 메서드를 지원)

let response = await fetch(url)
for (let [key, value] of response.headers) {} // 헤더 전체를 순회

2)요청 헤더

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

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

2. POST 요청

  • method : HTTP 메서드
  • body : 요청 본문으로 다음 항목 중 하나
    - 문자열
    • 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);

3. 이미지 전송하기

Blob 이나 BufferSource 객체를 사용하면 fetch로 바이너리 데이터를 전송할 수 있음

async function submit() {
      let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
      let response = await fetch('/article/fetch/post/image', {
        method: 'POST',
        body: blob
      });

Blob 객체는 내장 타입을 갖기 떄문에 특별히 content-type을 설정하지않아도 됨

profile
읽고 기록하고 고민하고 사용하고 개발하자!
post-custom-banner

0개의 댓글