Fetch

정의

<aside> 💡 fetch란? fetch는 비동기 적으로 api를 불러오고, 정보를 내보내 주기도 하는 함수이다. fetch 함수에 쓰여지는 method는 get과 post가 있는데 설정을 따로 안해주면 기본적으로 get으로 설정이 되어있다.

</aside>

실습

• async/await 패턴

async function request() {
  const response = await fetch('<https://api.github.com/orgs/react>',
  {
    method: 'GET', //method 지정을 하지 않을 경우에 default 값은 GET이다.
  });
  const data = await response.json();
  console.log(data) // data를 응답 받은 후의 로직
}
request();

• promise 패턴

function request() {
  fetch('<https://api.github.com/orgs/react>', {
    method: 'GET', //method 지정을 하지 않을 경우에 default 값은 GET이다.
  })
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data); // data를 응답 받은 후의 로직
  });
}
request();

https://elvanov.com/2597

장점

• 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없음
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능

단점

• 네트워크 에러 발생 시 response timeout이 없어 기다려야 함
• JSON으로 변환해주는 과정 필요
• 상대적으로 axios에 비해 기능이 부족

Axios

정의

<aside> 💡 axios란?

Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.

</aside>