本文までスキップする

Web API通信 Fetch API をつかってみる

アバター画像
Mineo Okuda
/ 728 views

サーバーとの非同期通信は、古くはAjaxの登場で非常に身近なものになり、その後、Promiseベースのaxiosが台頭し、コールバックやエラー処理も流暢に書けるようになりました。

そして現在ではFetch APIという、Promiseベースの通信方法がブラウザに標準で実装されるようになりました。
今回はそのFetch APIの使い方をご説明したいと思います。

以前、私が書いたaxiosの記事はこちら

Fetch APIとは

Fetch APIとはPromiseベースのブラウザに標準で実装されたWeb API通信であり、それまでにあったXMLHttpRequestよりHTTPリクエストを簡単に書くことができます。

対応ブラウザ

2024年4月現在、最新版のブラウザではほとんどが対応しています。

  • Chrome 42+
  • Edge 14+
  • Firefox 39+
  • Safari 10.1+
  • Opera 29+

基本的な使い方

Fetch APIの基本的な書き方は以下のようになります。
Promiseベースなのでresolve時のthenやreject時のcatchをメソッドチェーンで書けて非常にわかりやすいですね。
何よりもブラウザ標準での実装なのでライブラリに依存しないことがメリットではないでしょうか。

注意点としてはaxiosのように1回目のresolve時にresponse.dataにデータが入って来るのではなく、JSONなど期待した形式で値を返す必要がある点です。

Fetch APIの例

await fetch('https://example.com/api') 
.then(response => {
        return response.json();  
})
.then(data => {
        // dataを処理
})
.catch(error => {
        console.error(error);  
});

メソッドを変更したり、データを送る方法は以下のようにします。

POSTメソッドで送信する例

await fetch('https://example.com/api', {
 	 method: "POST",
 	 body: data
});

また、別ドメイン間の通信時に必須となるCORS(Cross-Origin Resource Sharing)にもオプションを設定するだけで対応してくれます。(※これはありがたい)

CORSの設定例

await fetch('https://example.com/api', {
 	 mode: 'cors',
 	 credentials: true,
}) 

使用できる関数

Fetch APIでは以下の関数を使用できます。
必要にあわせて使うとより複雑なこともできます。

fetch

HTTPリクエストを送信するためのメイン関数

Headers

リクエストヘッダやレスポンスヘッダを操作する関数

Request

リクエストオブジェクトを生成する関数

Response

レスポンスオブジェクトを生成する関数

text

レスポンスをテキスト形式へ変換する関数

json

レスポンスをJSON形式へ変換する関数

blob

レスポンスをBlobデータへ変換する関数

arrayBuffer

レスポンスをArrayBufferで取得する関数

formData

FormDataオブジェクトを生成する関数

axiosとの違い

axiosと書き方など非常に似ているため「axiosとの違いは何なのか」と思った方も多いと思います。
違いとしては他にもあると思いますが、以下が挙げられます。

  • ブラウザ標準実装のためライブラリを入れる必要がない
  • リクエストとレスポンスの処理がやや複雑
  • ステータスコードの処理やエラー処理を自分で書く必要がある

まとめ

今回、実際に案件でFetch APIを使ってみる機会がありましたので記事にしてみました。
私はもう何年もaxiosユーザーなので比較的理解が早かったように思います。
ライブラリいらずで書けるというのは非常に便利だなと思います。
皆さんもぜひ、使ってみてはいかがでしょうか?