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

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

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

Fetch APIとは

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

対応ブラウザ

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

基本的な使い方

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

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

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

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

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

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

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

使用できる関数

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

axiosとの違い

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

まとめ

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