決定ボタンは右がいいのか左がいいのか?

サーバーとの非同期通信は、古くはAjaxの登場で非常に身近なものになり、その後、Promiseベースのaxiosが台頭し、コールバックやエラー処理も流暢に書けるようになりました。
そして現在ではFetch APIという、Promiseベースの通信方法がブラウザに標準で実装されるようになりました。
今回はその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では以下の関数を使用できます。
必要にあわせて使うとより複雑なこともできます。
HTTPリクエストを送信するためのメイン関数
リクエストヘッダやレスポンスヘッダを操作する関数
リクエストオブジェクトを生成する関数
レスポンスオブジェクトを生成する関数
レスポンスをテキスト形式へ変換する関数
レスポンスをJSON形式へ変換する関数
レスポンスをBlobデータへ変換する関数
レスポンスをArrayBufferで取得する関数
FormDataオブジェクトを生成する関数
axiosと書き方など非常に似ているため「axiosとの違いは何なのか」と思った方も多いと思います。
違いとしては他にもあると思いますが、以下が挙げられます。
今回、実際に案件でFetch APIを使ってみる機会がありましたので記事にしてみました。
私はもう何年もaxiosユーザーなので比較的理解が早かったように思います。
ライブラリいらずで書けるというのは非常に便利だなと思います。
皆さんもぜひ、使ってみてはいかがでしょうか?