JavaScript - fetch

fetch

 

 

자바스크립트로 서버나 다른 주소의 데이터를 가져오고 싶을 때 사용하는 메서드

 

fetch 메서드로 네트워크를 통해 요청을 보내고 응답을 받아올 수 있다.

 

 

기본 문법

 

 

let promise = fetch(url, [options]);

 

url : 접근하고자 하는 URL

 

options : 선택 매개변수, method나 header

 

 

options에 아무것도 넣지 않으면 요청은 GET 메서드로 진행.

 

fetch()를 호출하면 브라우저는 요청을 보내고 프라미스가 반환됩니다.

 

응답은 두 단계를 거쳐 진행됩니다.

 

 

1 단계

 

 

먼저, 서버에서 응답 헤더를 받자마자 반환된 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 됩니다.

 

이 단계는 아직 본문(body)가 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 아닌지를 확인할 수 있습니다.

 

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

 

• status : HTTP 상태 코드
• ok : boolean 값. HTTP 상태 코드가 200과 299 사이일 경우 'true'

예시

let response = await fetch(url);

if (response.ok) { // HTTP 상태 코드가 200~299일 경우
    // 응답 본문을 받습니다.
    let json = await response.json();
} else {
    alert("HTTP-Error: " + response.status);
}​

 

 

2 단계

 

 

추가 메서드를 호출해 본문(body)를 응답 받습니다.

 

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

 

• response.text() : 응답을 읽고 텍스트를 반환
• response.json() : 응답을 JSON 형태로 파싱
• response.formData() : 응답을 FormData 객체 형태로 반환
• response.blob() : 응답을 Blob 타입 형태로 반환

예시

let url = '원하는 주소';

let response = await fetch(url);

let commits = await response.json();

alert(commits);