[React] Axios vs Fetch

こんにちは。
なかにしです。

久々のReact記事です。

業務で同じチームの方と話しているとき、
「Axios」は初めて使います～という方が見えて
逆に何使ってるんですか？と聞いたのがきっかけです。

現案件の技術選定を担当させていただいた際、
「非同期といえばAxios」という固定概念でとりあえず決めた経緯があったので、
ちゃんと他の技術も調べないとなーという反省も込めて記事にします。

Fetchとは
Axiosとは
データ取得時の文法の違い
エラー時の振る舞いの違い
まとめ

Fetchとは

非同期通信の際に使われる技術です。
ブラウザに標準搭載で、インストールは不要です。

「fetch(“url”)」でリクエストを飛ばすことができます。

取得データはPromise型で返ってくるので、
「.jsonメソッド」でjsonファイルに変換し、色々します。

Axiosとは

非同期通信の際に使われる技術です。
インストールが必要です。

以下コマンドでインストールできます。

npm i axios

取得データはjsonで返ってくるので、そのまま色々できます。

データ取得時の文法の違い

それぞれの文法の違いを見ていきます。

Get

ユーザー情報を取り出すのを想定します。(API : “sample/sample”)
nameやidなど、ユーザー情報の塊をjsonで取ってきて、名前をコンソールに表示します。

・Fetch

fetch("https://sample/sample")
    .then((response) => response.json())
    .then((user) => console.log(user.name));

・Axios

axios.get("https://sample/sample")
     .then((response) => response.data.name);

まあ若干の差ですね。
そこまで大差はないように見えます。

POST & PUT

{name:Tanaka}というjsonをサーバー側に送り、登録や更新をする想定です。
POSTとPUTはほぼ一緒なので、一気にやります。

urlはgetと同じく「sample/sample」にします。
無事に送れたら「ヤッタネ！」を出力します。

・Fetch

  // POST
  const data = { name: "Tanaka" };

  fetch("https://sample/sample", { method: "POST", body: JSON.stringify(data) })
       .then((response) => console.log("ヤッタネ！"));

  // PUT
  const data = { name: "Tanaka" };

  fetch("https://sample/sample", { method: "PUT", body: JSON.stringify(data) })
       .then((response) => console.log("ヤッタネ！"));

・Axios

  // POST
  const data = { name: "Tanaka" };

  axios.post("https://sample/sample", data)
       .then((response) => console.log("ヤッタネ！"));

  // PUT
  const data = { name: "Tanaka" };

  axios.put("https://sample/sample", data)
       .then((response) => console.log("ヤッタネ！"));

個人的には大きな差です。

fetchは
・第2引数にPOSTやPUTを指定
・第2引数にbodyを指定、データをJsonに変換して入れる
という手間が発生しています。

Jsonに変換する必要がないのは結構楽ですね。

DELETE

{id : 1}の方を削除する想定です。
削除後は「ナイス削除！」と開発者に伝えます。

・Fetch

  const deleteData = { id: "1" };

  fetch("https://sample/sample", { method: "DELETE", body: JSON.stringify(deleteData) })
       .then((response) => console.log("ナイス削除！"));

・Axios

  const deleteData = { id: "1" };

  axios.delete("https://sample/sample", { data: deleteData })
       .then((response) => console.log("ナイス削除！"));

Axios側はDeleteのみ {data: 削除するオブジェクト}という形に変更されています。

Deleteは危険だからわざとdataという一手間かけて
他のメソッドと間違えないようにしてんのかな～って感じですね。知らんけど。

エラー時の振る舞いの違い

・Fetch
404や500エラーが出てもそのまま進みます。
200系だけ取りたい場合は「response.ok」での判定を挟む必要があります。

・Axios
404や500も一括でエラー処理できます。
「200系か、それ以外か。」で分かれます。

まとめ

いかがでしたでしょうか。

僕はAxios派ですが、正直どちらを使っても数行の差になると思うので、
好みに依るところが強いかなーと思います。

大事なのはどちらも書けるようにしておくことですね。

今回はこまで！
/** Enjoy Hacking!! **/