JavaScript - Fetch API / Ajax (XHR)

fetch API

서버에 네트워크 요청을 보내고 새로운 정보를 받아오기 위해 사용하는 API다. 이전에는 서버에 네트워크 요청을 보내고 정보를 받아오기 위해 AJAX (Asynchronous JavaScript And XML, 비동기적 JavaScript와 XML) 같은 것들이 사용되었는데, fetch API가 등장하고나서는 훨씬 간편해졌다. 단, fetch API는 구식 브라우저에서는 지원되지 않는다.

 

기본 문법 + GET 방식

let promise = fetch(url, [options])

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

options에 아무 것도 넘기지 않으면 요청은 자동으로 GET 메소드로 진행되어 url로부터 콘텐츠가 다운로드 된다. 응답은 대개 두 단계를 거쳐 진행된다.

 

단계 1

서버에서 응답 헤더를 받자마자 fetch 호출 시 반환 받은 promise가 내장 클래스 response의 인스턴스와 함께 이행 상태가 된다. 이 단계는 body가 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공하였는지 확인할 수 있다. 네트워크 문제나 존재하지 않는 사이트를 접속하려는 경우처럼 HTTP 요청을 보낼 수 없는 상태에서는 promise는 거부 상태가 된다.

 

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

• status – HTTP 상태 코드(예: 200) ok – 불린 값. 
• 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에는 promise를 기반으로 하는 다양한 메소드가 있다. 이 메소드들을 사용하면 다양한 형태의 response body를 처리할 수 있다.

• response.text() – 응답을 읽고 텍스트를 반환한다.
• response.json() – 응답을 JSON 형태로 파싱한다.
• response.formData() – 응답을 FormData 객체 형태로 반환한다.
• response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환한다.
• response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환한다.
• response.body - ReadableStream 객체인 response.body를 사용하면 응답 본문을 청크 단위로 읽을 수 있다.

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);

위 예시를 await 없이 promise만 사용하면 아래와 같다. 

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json()) // 응답을 텍스트로 얻으려면 response.text()
  .then(commits => alert(commits[0].author.login));

 

POST 요청

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

 

- method – HTTP 메소드(예: POST) 

- body – 요청 본문으로 다음 항목 중 하나이어야 한다. 

• 문자열(예: JSON 문자열)
• FormData객체 – form/multipart 형태로 데이터를 전송하기 위해 쓰임
• Blob나 BufferSource – 바이너리 데이터 전송을 위해 쓰임
• URLSearchParams – 데이터를 x-www-form-urlencoded 형태로 보내기 위해 쓰이는데, 요즘엔 잘 사용하지 않음

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);

 

 

 

https://ko.javascript.info/fetch

fetch