실전 프로젝트를 하는 도중에 기술 멘토를 도와주시는 멘토분께서 왜 이러한 기술을 사용했는지 설명이 필요하다고 하셔서 공부하면서 나온 내용을 정리해봤다.

Fetch와 Axios

Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트다. 즉 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject)할 수 있는 promise가 반환된다.

기본 문법 비교

Fetch

fetch는 두개의 인자를 받는다
첫번째 인자로는 가져오고자 하는 리소스의 url, 두번째 인자는 선택적 인자로 요청의 설정 옵션을 포함한다.
두번째 인자를 적지 않으면 기본적으로 GET 요청을 생성한다.

fetch(url ,{
	method:"",
    headers:{
    	"" : ""
    },
    data: ""
)

Axios

axios도 문법은 fetch와 비슷하다
하지만 axios는 다양한 방법으로 요청할 수 있다.

axios.post(url, body)

axios(url, {
	method: "get", // 다른 옵션도 가능
  headers: {},
  data: {},
})

JSON 데이터 처리에서의 차이점

Fetch

fetch()는 .then() 메서드에서 처리된 promise를 반환한다. 이 때는 아직 우리가 필요한 JSON 데이터의 포맷이 아니기 때문에 응답 객체의 .json() 메서드를 호출하고 그러면 JSON 형식의 데이터로 이행(resolve)된 또 다른 promise를 반환한다. 따라서 일반적인 fetch 요청은 두 개의 .then() 호출을 갖는다.

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
  .then((response) => response.json())
  .then(console.log);

Axios

Axios를 사용하면 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있다. 응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있다.

const url = "https://jsonplaceholder.typicode.com/todos";

axios.get(url).then((response) => console.log(response.data));

자동 문자열 반환

axios에서는 JSON.stringify()를 사용하지 않고 json객체를 받아올 수 있지만, fecth()에서는 JSON.stringify()를 사용하여 객체를 문자열로 변환하고 body에 할당해야 한다.
또한 Fetch를 사용하면 명시적으로 Content-Type을 application/json으로 설정해야 한다.

// axios
const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false,
};

axios
  .post(url, {
    headers: {
      "Content-Type": "application/json",
    },
    data: todo,
  })
  .then(console.log)
  .then(response => console.log(response.data));

//fetch
const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false,
};

fetch(url, {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(todo),
})
  .then((response) => response.json())
  .then((data) => console.log(data));