Fetch APIの基礎 | 非同期通信 Ajax | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

Fetch APIとは？

Fetch APIは、JavaScriptでサーバーと非同期通信を行うための標準APIです。従来のXMLHttpRequestよりもシンプルで扱いやすく、現在では新しいWeb開発で広く利用されています。

例えば、ニュース一覧や商品情報などをサーバーから取得し、ページを再読み込みすることなく画面を更新する際に利用されます。

Fetch APIと非同期通信

Fetch APIでは、fetch()を実行するとPromiseが返されます。サーバーからレスポンスが返ってくるまでJavaScriptの実行を止めることなく、他の処理を続けることができます。

取得したデータは、.then()やasync/awaitを使って受け取ります。

Fetch APIの基本的な使い方

基本的な流れは次のようになります。

1. fetch()でサーバーへリクエストを送信する。
2. レスポンスを受け取る。
3. response.json()などでデータを取得する。
4. 取得したデータを利用する。
5. エラーが発生した場合はcatch()で処理する。

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("エラー:", error);
    });

この例では、指定したURLからJSONデータを取得し、コンソールへ表示しています。

Fetch APIを使った実用例

ボタンをクリックしてデータを取得し、画面へ表示する例です。

HTMLコード

<button onclick="fetchData()">データを取得する</button>
<pre id="response"></pre>

JavaScriptコード

function fetchData() {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(response => {
            if (!response.ok) {
                throw new Error("HTTPエラー: " + response.status);
            }

            return response.json();
        })
        .then(data => {
            document.getElementById("response").textContent =
                JSON.stringify(data, null, 2);
        })
        .catch(error => {
            document.getElementById("response").textContent =
                "エラー: " + error.message;
        });
}

ボタンをクリックすると、サーバーからデータを取得し、その内容を画面へ表示します。

async/awaitを使った書き方

現在では、async/awaitを使って記述することも一般的です。同期処理のように読みやすく記述できます。

async function fetchData() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/posts/1"
        );

        if (!response.ok) {
            throw new Error("HTTPエラー: " + response.status);
        }

        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

現在のJavaScriptでは、async/awaitのほうが可読性が高いため、多くのプロジェクトで採用されています。

Fetch APIのポイント

• Promiseを返すため、.then()またはasync/awaitで処理する。
• HTTPエラー（404や500など）は自動では例外にならないため、response.okで確認する。
• JSONを取得する場合はresponse.json()を使用する。
• 文字列を取得する場合はresponse.text()を使用する。
• ページを再読み込みせずにデータを更新できる。

主なレスポンス取得メソッド

まとめ

• Fetch APIは、サーバーと非同期通信を行うための標準APIである。
• fetch()はPromiseを返す。
• .then()またはasync/awaitで結果を取得する。
• response.okでHTTPエラーを確認することが重要である。
• JSONデータはresponse.json()で取得する。
• 現在ではasync/awaitを使った記述が一般的である。