[Javascript] Fetch API 사용하기

Fetch API란?

HTTP의 GET, POST, PUT, DELETE같은 메소드를, 사용할 수 있도록 해주는 javascript API

( Promise 객체를 반환한다. )

 

Fetch 특징

1. fetch()로 부터 반환되는 Promise 객체는, HTTP error 상태를 reject 하지 않는다.
( HTTP Statue Code가 404나 500을 반환하더라도 )

대신 ok 상태가 false인 resolve가 반환되며,
네트워크 장애나 요청이 완료되지 못한 상태에서 reject가 반환된다.

2. fetch()는 쿠키를 보내거나 받지 않는다.
사이트에서 사용자 세션을 유지 관리해야하는 경우, 인증되지 않는 요청이 발생
쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 한다.

 

Fetch로 api 데이터 불러오기

// json형식의 api 불러오기

fetch('http://example.com/movies.json')
  .then(function(response) {
    // 데이터 성공적으로 불러왔을때, 응답을 json 형식으로 반환한다.
    return response.json();
  })
  .then(function(myJson) {
    // 데이터 성공적으로 불러왔을때, 응답을 json => string 형식으로 콘솔에 출력한다
    console.log(JSON.stringify(myJson));
  });

 

Fetch 옵션 사용하기

const res = await fetch(url, {
  method: 'POST', // POST 요청 전달
  mode: 'cors',
  cache: 'no-cache',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  }, // header 전달
  redirect: 'follow',
  referrerPolicy: 'no-referrer',
  body: JSON.stringify(data)
});