最近のJavaScriptのアップデートでは、fetch() APIにいくつかの重要な改良が加えられました。これにより、非同期通信の際の利便性や効率性が向上し、開発者はより柔軟なコーディングが可能になりました。本記事では、これらの改良内容を詳しく解説し、具体的な実装例を紹介します。
fetch() APIとは？
fetch() APIは、JavaScriptでHTTPリクエストを行うための標準的な方法です。従来のXMLHttpRequestに代わるもので、PromiseベースのAPIであるため、非同期操作がより簡潔に書けるのが特徴です。fetch()を使用することで、リソースの取得、データの送信、エラーハンドリングが一連の流れで処理できます。
以下は、fetch()を使用してデータを取得する基本的な例です。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));
改良された点と新機能
最新のアップデートでは、fetch() APIに以下のような改良が加えられました。
- AbortControllerの統合:
fetch()リクエストを中止するためのAbortControllerが統合され、ユーザーは必要に応じてリクエストをキャンセルできるようになりました。これにより、不要なネットワークトラフィックを削減し、アプリケーションのパフォーマンスが向上します。 - ストリーミング対応: 新しい
Responseオブジェクトには、ストリーミング機能が追加され、データをリアルタイムで受け取ることが可能になりました。これにより、大きなファイルのダウンロードや、データの一部を先に処理することができるようになりました。 - 改善されたエラーハンドリング: 従来の
fetch()では、ネットワークエラー以外のエラー（例えば、HTTPステータスコードが404や500の場合）はPromiseが解決されるため、開発者は明示的にエラーチェックを行う必要がありましたが、今回のアップデートでは、HTTPエラーをより明確に扱えるように改善されました。
これらの改良により、fetch()はより強力で使いやすいAPIへと進化しました。
実装例: AbortControllerの活用
AbortControllerを使って、fetch()リクエストをキャンセルする実装例を見てみましょう。以下のコードは、ボタンをクリックするとリクエストを送信し、もう一度クリックするとそのリクエストを中止する仕組みです。
const controller = new AbortController();
const signal = controller.signal;
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('https://api.example.com/data', { signal })
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', error);
}
});
});
// キャンセルボタンのイベントリスナー
document.getElementById('cancelButton').addEventListener('click', () => {
controller.abort();
console.log('Request cancelled');
});
このように、AbortControllerを使用することで、ユーザーが操作する際にリクエストを適切に管理できます。
ストリーミングの利用例
ストリーミング機能を利用すると、大きなデータを扱う際に効率的に処理することが可能です。以下は、ストリーミングを使用してファイルを部分的に読み込む実装例です。
fetch('https://api.example.com/largefile')
.then(response => {
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
return reader.read().then(function processText({ done, value }) {
if (done) {
console.log('Stream finished');
return;
}
// 受け取ったデータをデコードして表示
console.log(decoder.decode(value, { stream: true }));
return reader.read().then(processText);
});
})
.catch(error => console.error('Fetch error:', error));
この例では、ストリーミングを使って大きなファイルを分割して受信し、データをリアルタイムで処理しています。これにより、ユーザーが待つ時間を短縮し、アプリケーションの反応性を高めることができます。
