기타

fetch로는 데이터를 바로 사용할 수 없다.
fetch를 사용할 땐 두 단계를 거쳐야 한다.
먼저 올바른 url로 요청을 보내야 하고,
바로 뒤에오는 응답에 대해 json()을 해줘야 하는 것이다
(axios는 json()과정을 자동으로 해주는 셈이다).

반면 axios를 사용할 경우 res.json()단계를 넘어가도 좋다.
그러나 axios로 받아오는 데이터는 서버에서 넘겨주는 body데이터 외에 부가적인 정보도
포함되어 있기 때문에 원하는 data만 골라서 사용해야 한다.
이부분은 axios 공식문서를 참고하자.

1. fetch api

개요

비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청입니다.
네트워크를 통해 이루어지는 요청은 그 형태가 다양합니다.
그중에서 URL로 요청하는 경우가 가장 흔합니다.
URL로 요청하는 것을 가능하게 해 주는 API가 바로 fetch API입니다.

fetch를 이용한 네트워크 요청

• 많은 웹사이트에서는 해당 정보만 업데이트하기 위해 요청 API를 이용합니다.
  그중 대표적인 fetch API를 이용해 해당 정보를 원격 URL로부터 불러온다
  이 과정은 비동기적으로 이루어집니다.

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

[코드] 개발자 도구의 콘솔에서 fetch API를 사용하여 데이터를 요청합니다.

2. Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있습니다.

Fetch API vs Axios

Fetch API

• 빌트인 API라 별도의 설치 필요없습니다.
• .json() 메서드를 사용해야 합니다.

Axios

• 써드파티 라이브러리로 설치가 필요합니다.
• 자동으로 JSON데이터 형식으로 변환됩니다.

1) Axios 사용법

설치

npm install axios

(1) GET 요청

• GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드입니다.
  첫번째 인자에는 url주소가 들어갑니다. url주소는 필수입니다.
  두번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정하게 됩니다. 옵션의 경우 필수는 아닙니다.

axios.get("url"[,config])

- 예시

아래는 fetch API와 axios GET 요청의 예시입니다.
이를 통해 fetch API와 axios의 사용법과 차이점을 확인해보세요.
또한, Promise 버젼과 Async / Await 버젼도 있으니
Promise와 Async / Await의 차이점도 같이 확인해보세요.

Fetch API

Axios

(2) POST 요청

POST 요청은 서버에게 데이터를 보내기 위해 사용되는 메서드입니다.
첫번째 인자에는 url주소가 들어갑니다. url주소는 필수입니다.
두번째 인자에는 요청 시 보낼 데이터를 설정하게 됩니다.
옵션의 경우 필수는 아니지만 상황에 따라 설정해주어야 합니다.

axios.post("url"[, data[, config]])

- 예시

아래는 fetch API와 axios POST요청의 예시입니다.
이를 통해 fetch API와 axios의 사용법과 차이점을 확인해보세요.
또한, Promise 버젼과 Async / Await 버젼도 있으니
Promise와 Async / Await의 차이점도 같이 확인해보세요.

[예시]Fetch API의 POST요청

[예시]Axios의 POST요청

출처 : 유어클래스