Fetch APIとは
Fetch APIとは、JavaScriptでHTTPリクエストを送信できるインターフェースです。
同じくHTTPリクエストを行うXMLHttpRequestもありますが、Fetch APIの方がモダンでシンプルに記述することができます。
本記事執筆時点では、ほとんどの主要なモダンブラウザで利用することができます。（2022年9月）
Fetch APIの基本的な使い方
Fetch APIの基本的な使い方は以下です。
// Fetch APIの基本的な使い方(GETリクエスト)
fetch('./sample')
.then((response) => {
if (!response.ok) { // 通信に失敗した時
throw new Error();
}
return response.json(); // (レスポンスがJSONデータの時の処理)
})
.then((json) => {
console.log(json);
})
.catch((error) => {
// エラー処理
console.error(error);
});Fetch APIでの非同期通信はPromiseで行われ、then()メソッドで Response オブジェクトを受け取ります。
Response オブジェクトではサーバーからの通信ステータスや、レスポンスされるヘッダー情報・コンテンツなどを確認することができます。
また、エラー処理はcatch()メソッドで記述します。
Fetch APIを使ってPOSTリクエストを行う
Fetch APIでの基本的な処理ではGETリクエストを行うようになっています。
Fetch APIでPOSTリクエストを行うには、Fetch API処理の第二引数にオプションを設定します。
// 送信するFormDataを作成する
const formData = new FormData();
formData.append('name', 'taro');
formData.append('age', 22);
// Fetch API でPOSTリクエストを行う
fetch('./sample', {
method: 'POST', // POSTリクエストの指定
body: formData // リクエストボディの指定
}).then((response) => {
~処理~then()の処理やcatch()でのエラー処理については、GETリクエストの処理の時と同じ方法で記述することができます。
async/awaitでFetch APIを使う
ES7よりJavaScriptに追加されたasync/awaitを使って、Fetch APIの処理を記述することもできます。
async/awaitを使うことで、then()などを使った記述よりも簡潔に記述することができるようになります。
async/awaitでのfetch APIを使ったGETリクエスト
asyncは関数につけるものであるため、ここでは省略します。関数化したい場合にはasyncをつけるようにしましょう。
// async/awaitを使ってGETリクエスト
try {
const response = await fetch('./sample);
const json = await response.json();
console.log(json);
}
catch(error) {
console.error(error);
}メソッドチェーンを利用したthen()メソッドやcatch()メソッドでの記述よりも簡潔に記述できているのがわかります。
エラー処理には try{…}catch{…} を利用します。
async/awaitでのfetch APIを使ったPOSTリクエスト
// 送信するFormDataを作成する
const formData = new FormData();
formData.append('name', 'taro');
formData.append('age', 22);
// async/awaitを使ってPOSTリクエスト
try {
const response = await fetch('./sample, {
method: 'POST',
body: formData
});
const json = await response.json();
console.log(json);
}
catch(error) {
console.error(error);
}まとめ
JavaScriptのFetch APIを利用することで、XMLHttpRequestを使うよりも非同期処理を簡潔に記述することができます。
また、async/awaitを使うことでさらに簡潔に記述することができるようになります。
コメント