ぶうううん's Cafe

どうにかこうにか。備忘録に近い。

fetchとaxios

Web

 フロントエンドからバックエンドAPIにアクセスする方法はいくつか存在する。今回はReactに限った話ではないが、代表的な手法であるfetchとaxiosについてまとめておく。

共通な部分

  • 非同期通信を可能にする。
  • Ajaxの実装である。
  • Promiseを返却する。

fetch

メリット・デメリット

  • コードが長くなりがち。
  • レスポンスが HTTP 404 や 500 を返す HTTP エラーステータスの場合でも拒否されない。拒否されるのは、ネットワーク障害の場合や何かがリクエストの完了を妨げた場合のみ。
    • fetch() が成功したかどうかを正確に判定するには、プロミスが解決された後でResponse.ok プロパティが true になっているかを確認する。

その他

  • javascriptの標準API。
  • fetchは init オプションで資格情報を設定しない限り、オリジンをまたぐクッキーを送信しない。
  • Fetch Requestは受け取るリソースからの指示ではなく、CSPの connect-src ディレクティブによって制御される。
  • 認証情報付きRequestを送るようにするには、credentials: 'include' を init オブジェクトに追加して fetch() メソッドに渡す。

axios

メリット・デメリット

  • npmなどでinstallとimportが必要。
  • 各種http request methodに対応したメソッドが存在する。

まとめ

  • 個人的にはfetchよりはaxiosが直感的だと思う。
  • axiosをimportできる場合は使ったほうが楽。

References