JS fetch()

fetch는 사용자 정보 가져오기, 주문사항 전송, 사용자 정보 삭제 등 서비스의 서버단에 네트워크 요청을 보내야 할 때 사용하는 자바스크립트 내장 메소드입니다. fetch의 기본 문법은 아래와 같습니다.

 

let promise = fetch(url, [options])

url : 접근하고자 하는 url (보통 API)

options : 헤더 정보, method등을 지정할 수 있음

 

fetch 처리순서

fetch 메소드를 호출하게 되면 브라우저는 지정한 url에 네트워크 요청을 보내고, Promise 형태로 반환을 받습니다. 이 때, 서버에서 응답 헤더 데이터를 먼저 받고, 이 때 Promise는 HTTP 상태 코드를 가지고 있어 정상적으로 요청이 처리되었는지를 확인할 수 있습니다. 이후, 본문(body)데이터가 도착하고, 사용자는 .then함수를 통해 처리한 데이터에 추가 작업을 수행할 수 있습니다.

 

let response = await fetch(url);

if (response.ok) { // HTTP 상태 코드가 200~299일 경우
  // 응답 본문을 받습니다(관련 메서드는 아래에서 설명).
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

이러한 특성 때문에, 일반적으로 response로 받은 결과의 처리를 위해서는 아래와 같이 코드를 사용합니다.

 

fetch(url, options).then(res => res.json()).then(res => console.log(res))

 

let response = await fetch(url);
let commits = await response.json();
console.log(commits);

 

요청 options

서버에서 단순 데이터를 요청할 때는 GET메소드를 사용하지만, 새로운 데이터를 저장하거나, 삭제 등의 업무를 수행할 수 있습니다. 이 때는 fetch 메소드의 options인자를 통해 요청 방식을 지정할 수 있습니다.

 

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })