[Javascript] fetch()와 axios 라이브러리

자바스크립트에서 HTTP 통신을 하기 위해서는
1. fetch()함수를 사용하거나
2. axios라이브러리를 사용하거나
3. 그 외 다른 라이브러리를 방법이 있습니다.

MDN Web API/ Fetch API
axios 홈페이지

fetch()

fetch('http://localhost:3000/파일경로/파일이름.json', {
          method: 'GET'
      })
        .then(res => res.json())
        .then(data => {
          console.log(data)
        })

fetch함수는 빌트인되어 있기 때문에 별도로 설치할 필요가 없습니다.
fetch함수가 인자로 주어진 주소로 들어가서 반환하는 값은 Response객체이기 때문에 자바스크립트 객체로 사용하기 위해서 json()함수로 변환해야 합니다.

그리고 변환한 값을 콘솔에 찍어보면 객체 형태로 변환된 data를 볼 수 있습니다! 하지만 이 data는 처음 만들었을 때처럼 완벽한 객체는 아닐 수 있습니다.
예를 들어 Date.now()를 사용하여 현재 날짜를 넣었다면 이런 부분은 JSON으로 변환되는 중에 String타입의 현재 날짜로 변환됩니다. 다시 Date.now()로 객체를 만들고 싶다면 추가적인 작업이 필요합니다.

axios()

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

axios를 npm이나 yarn으로 설치한 후에 axios() 함수를 사용합니다.
(물론 CDN으로 사용할 수도 있습니다.)
get method의 예시를 보면 axios라이브러리는 Promise객체를 지원합니다.

method :

method는 http통신의 method를 의미합니다.
get이 아닌 post method를 사용한다면 header, body등을 추가할 수 있습니다.