Zenn
🗂

【リソース取得APIの比較】fetchとaxiosの4つの相違点

2020/12/16に公開1件
JavaScript
fetch
http
axios
tech

fetchとaxiosはどちらも外部リソースを取得するためのライブラリーで非同期で動くためPromise型を返します。

似ているライブラリーですが、主に4つの違いがあるのでそれぞれを解説してきます。

  1. インストール方法
  2. HTTPメソッド通信
  3. JSONデータの取得方法
  4. エラーハンドリング

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通信を行うことができます。

また、第2引数にパラメータを渡すだけで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>
  )
}

ちなみにpostのほかにもget、put、deleteがあるのでfetchよりも直感的にWeb APIにアクセスできますね。

3.JSONデータの取得方法

3つ目は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 Found)や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データをエンコードしなくていい。第2引数にパラメータを渡すだけ。
  • 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

Discussion