[자원 획득 API 비교] fetch와 axios의 4가지 차이점

fetch와 axios는 외부 자원을 얻는 총서로 다른 동작을 하기 때문에 Promise형으로 되돌아옵니다.
비슷한 장서지만 주로 4가지가 달라 각각 해설한다.

설치 방법

HTTP 메소드 커뮤니케이션

JSON 데이터 취득 방법

오류 처리

1. 설치 방법

fetch는 브라우저의 표준 총서에서 설치하지 않고 사용할 수 있습니다.
다른 한편, axios는 설치가 필요합니다.다음 명령을 사용하여 가져올 수 있습니다.yarn add axios npm install axios모듈을 가져와야 합니다.import axios from "axios"

2. HTTP 메소드 통신

HTTP 방법마다 통신을 호출하는 방법은fetch와 axios에서 다릅니다.

fetch를 통한 POST 통신

fetch에서 POST 통신을 할 때 2 파라미터에 추가method:"POST"가 필요합니다.
[fetch] POST 통신

export default function Index () {
  const onButtonClick = () => {
    const params = {
      method: "POST",
      body: JSON.stringify({name: "しゅう"})
    }
    fetch("/api/user", params)
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

axios를 통한 POST 통신

한편, axios는 이 함수만 사용하면 POST 통신을 할 수 있는post 방법을 갖추고 있다.
또한 매개변수를 두 번째 매개변수로 전달하면 HTTP 요청 바디에 추가됩니다.따라서fetch처럼 JSON 데이터를 인코딩할 필요가 없기 때문에 간결한 코드가 된다.
[axios] JSON 데이터 가져오기

import axios from "axios";

export default function Index () {
  const onButtonClick = () => {
    axios.post("/api/user", {name: "しゅう"})
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

그나저나 포스트 외에 get,put,delete도 있기 때문에fetch보다 웹 API에 직관적으로 접근할 수 있다.

3. JSON 데이터 획득 방법

세 번째는 JSON 데이터를 가져오는 방법입니다.

fetch의 JSON 데이터에 근거하여

fetch에서 반환한 JSON 데이터는 우선 response에서 접수한 후 JSON을 추출해야 한다.
[fetch] JSON 데이터의 획득

export default function Index () {
  const onButtonClick = () => {
    fetch("/api/user")
      //レスポンスのボディーからJSONデータを取得
      .then((response) => response.json()) 
      .then((user) => alert(`名前：${user.name}`))  
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

axios의 JSON 데이터 기반

한편, axios는 response.data에서 JSON 데이터를 얻을 수 있다.
[axios] JSON 데이터 가져오기

import axios from "axios";

export default function Index () {
  const onButtonClick = () => {
    axios.get("/api/user")
      .then((response) => alert(`名前：${response.data.name}`))  
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

4. 오류 처리

HTTP 상태가 404(Not Fund) 또는 500(Internal Server Error)을 수신할 때 동작이 다릅니다.

fetch의 404

fetch는 HTTP 상태 코드 404와 500을 받은 후에도 오류가 발생하지 않고 then 처리를 실행합니다.
따라서 다음 처리에서 URL이 존재하지 않고 404가 반환되더라도'성공했어!'라고 할 수 있다.라는 메시지를 남겼다.
[fetch] 404도 성공 메시지가 뜨네요.

export default function Index () {
  const onButtonClick = () => {
    fetch("/ABC")
      .then(() => alert("成功しました！"))
      .catch(() => alert("エラーです！"))
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

왜 404에서도 then 방법을 사용할 수 있을까?fetch의 역할은'응답을 받고 대답해 달라'는 것이기 때문이다.
404와 500을 받으면 반응이 있으니 정상으로 판단합니다.따라서 resolve, 운행then 방법.
따라서fetch에서 정상적인 응답 여부(200)를 판정해야 한다.다음 소스는response입니다.ok(상태 코드 200~299의 범위)를 통해 판단
[fetch] 404의 경우 오류 메시지

export default function Index () {
  const onButtonClick = () => {
    fetch("/ABC")
      .then((response) => {
        //ステータスがOKの場合のみ成功メッセージを表示
        response.ok ? alert("成功しました！"): alert("エラーです！");
      })
      .catch(() => alert("エラーです！"))
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

axios 404

한편, axios가 404나 500을 받으면 오류가 발생할 수 있습니다.많은 사람들에게 이것은 더욱 직관적이고 처리하기 쉽다.
[axios] 404에 오류 메시지 표시

import axios from "axios";

export default function Index () {
  const onButtonClick = () => {
    axios.get("/ABC")
      .then(() => alert("成功しました！"))
      .catch(() => alert("エラーです！"))
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

총결산

axios는 코드를 간결하게 쓸 수 있습니다.axios는 HTTP 요청 주체에서 JSON 데이터를 인코딩하지 않을 수 있습니다.매개 변수를 두 번째 매개 변수에 전달하기만 하면 된다.

axios는 더욱 직관적으로 쓴다.각 HTTP 메서드의 post 및 get 메서드를 준비합니다.

또한 axios의 404(Not Found) 또는 500(Internal Server Error)을 반납하면 오류가 됩니다.

참고 자료

https://www.npmjs.com/package/axios
https://shimablogs.com/fetch-api-axios-difference