JavaScriptにおけるfetchの解説

このページでは、JavaScriptにおけるfetchの使い方について解説します。fetchは、非同期でデータを取得するための強力なAPIで、ネットワークリクエストを簡単に行うことができます。以下では基本的な使い方から応用例までを解説します。

• fetchとは
• 基本的な使い方
• エラーハンドリング
• JSONデータの取得と処理
• データの送信
• 高度なオプション
• タイムアウト処理
• まとめ

fetchとは

fetchは、ブラウザの組み込み機能として提供されるAPIで、ネットワークを通じたリクエストとレスポンスを処理するために使用されます。以前はXMLHttpRequest（XHR）が主に使用されていましたが、fetchはその代替として登場し、よりシンプルでモダンなインターフェースを提供します。

基本的な使い方

fetchの基本的な使い方は非常に簡単です。以下はGETリクエストの例です。

fetch('https://api.example.com/data')
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

このコードは指定したURLからデータを取得し、コンソールに出力します。

エラーハンドリング

fetchはネットワークエラーが発生した場合にのみエラーをスローします。HTTPステータスコードがエラーを示す場合でも、Promiseは正常に解決されるため、手動でステータスを確認する必要があります。

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

JSONデータの取得と処理

fetchを使用してJSONデータを取得し、JavaScriptオブジェクトとして処理する方法を示します。

fetch('https://api.example.com/data.json')
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.error('Error:', error));

この例では、取得したデータをJSON形式としてパースし、オブジェクトとして出力します。

データの送信

fetchを使用してPOSTリクエストでデータを送信する方法を示します。

fetch('https://api.example.com/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },