[elice] fetch vs Axios

🐰 fetch

fetch 메서드는 HTTP 요청 전송 기능을 제공하는 Web API다.
fetch 함수는 프로미스를 지원하며, HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.
첫번째 인수는 url, 두 번째 인수는 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.

🐰 fetch - GET

fetch 함수의 두번째 인수로 전달하는 option은 생략하는 경우 GET 메서드로 요청

fetch를 사용해 응답 받는 과정은 크게 2가지 단계로 나눈다.
• fetch가 반환한 promise가 Response 인스턴스와 함께 fulfilled 상태가 됨
• 추가 메서드를 통해 응답 본문(body)을 받는다

const get = async (url) => {
  const response = await fetch(url);

  if (response.ok) {
    const data = await response.json();
    console.log(data);
  }
};

get("https://jsonplaceholder.typicode.com/posts/1");

response에는 프라미스를 기반으로 하는 다양한 메서드 존재, 본문을 읽을 때 사용되는 메서드는 하나만 사용 가능하다.
• response.text()
• response.json()
• response.formData()
• response.blob()
• response.arrayBuffer()

🐰 fetch - POST

async function postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

postData("https://example.com/answer", { answer: 42 }).then((data) => {
  console.log(data);
});

🐰 Axios란

Axios란 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리
빌트인 객체 또는 호스트 객체가 아닌 서드파티 라이브러리이기 때문에 npm 또는 yarn 같은 패키지 매니저를 통해 설치해서 사용해야 한다.
Axios 라이브러리 특징

// axios 방식;
const url = "https://jsonplaceholder.typicode.com/posts";

const payload = {
  title: "foo",
  body: "bar",
  userId: 1,
};

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

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP 에러 발생`);
    }
    return response.json();
  })
  .then(console.log)
  .catch((err) => {
    console.log(err.message);
  });

axios
  .get(url, {
    timeout: 4000, // 기본값 : 0
  })
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });