JavaScript) fetch, axios로 서버에 요청 보내기

요청 보내기

서버에 url와 restAPI를 통해 필요한 데이터에 대한 요청을 보낸다

restAPI

웹 http 프로토콜 통신에서 CRUD를 하기 위한 규약

CRUD 순서대로 POST, GET, PUT, DELETE가 담당하지만
주로 GET, POST를 사용하여 GET은 Read, POST가 나머지를 담당한다

• get: uri의 ?(물음표) 뒤 query를 통해 key=value 형식으로 요청을 보낸다 (여러 요청을 보낼 경우 & 로 구분)
  -> 해당하는 key=value에 대한 값을 요청 보내는 것, 응답은 응답 객체로 받을 수 있음

• post: 요청 객체 body에 응답에 필요한 데이터를 실어 보내고, 응답 객체를 받는다

fetch와 axios 모두 promise 타입의 객체를 반환한다

promise 객체

동기식으로 데이터 처리를 하기 위한 객체 형식
비동기 형식의 자바스크립트를 동기식으로 사용하기 위해 callback 함수를 사용하는데
이러한 callback을 간편히 처리할 수 있는 객체 형식이다.
callback 지옥을 promise 지옥으로
더 넓은 감옥에서의 삶..

async await를 이용하면 promise 각 단계의 반환 값을 변수에 담아 사용 가능

fetch API

자바스크립트 기본 문법으로 브라우저에서 요청을 보낼 때 사용
브라우저에서 작동하기 때문에 node를 사용한다면 node-fetch를 import 하여 사용해야 한다
node-fetch를 사용할 경우 버전에 따라 사용이 되지 않을 수 있다 -> 2.6.6 버전 사용

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

axios API

fetch와 비슷하지만 라이브러리를 import하여 사용해야 한다

// POST 요청 전송
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});