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

スポンサーリンク
スポンサーリンク

Fetch APIとは？

Fetch APIは、JavaScriptでサーバーとの非同期通信を行うための最新の方法です。従来のXMLHttpRequestに比べ、シンプルで直感的に使える設計になっています。Fetch APIを使うと、JavaScriptコードでサーバーにデータをリクエストし、非同期的にその結果を受け取ることができます。

例えば、Webページ上でニュースやブログ記事のリストを最新の状態に更新する場合など、Fetch APIを使ってサーバーからデータを取得し、ページに表示することができます。

Fetch APIと非同期通信

Fetch APIは、サーバーとのデータ通信を行うための非同期な方法です。これにより、ページを再読み込みせずにサーバーから必要なデータを取得し、動的にページの内容を変更することができます。Ajaxの技術と同様に、ユーザーの操作に応じて柔軟にデータをやり取りすることが可能です。

Fetch APIはPromiseを返すため、非同期処理を扱いやすくなります。Promiseとは、将来の結果を表すオブジェクトで、成功時と失敗時の処理を簡単に記述できるようになります。

Fetch APIの基本的な使い方

Fetch APIを使用する際の基本的な流れは以下の通りです。

  1. fetch()メソッドを使用してサーバーにリクエストを送る。
  2. リクエストが成功した場合、レスポンスをPromiseオブジェクトとして受け取る。
  3. Promiseが解決されたら、レスポンスのデータを取り出して処理する。

以下に、サンプルコードを示します。

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

このコードでは、指定したURLからデータを取得し、そのデータをJSON形式で受け取って、コンソールに出力しています。.catch()を使って、エラーが発生した場合の処理も追加しています。

具体的なFetch APIの例

次に、ボタンをクリックしてサーバーからデータを取得し、その結果を画面に表示する簡単な例を紹介します。Fetch APIを使って非同期通信を行い、サーバーから取得したデータを動的にページに表示します。

非同期通信の例

結果: ボタンをクリックすると、サーバーからデータが取得されて画面に表示されます。

HTMLコード

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

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').innerHTML = JSON.stringify(data, null, 2);
    })
    .catch(error => {
        document.getElementById('response').innerHTML = 'エラー: ' + error.message;
    });
}

この例では、Fetch APIを使ってサーバーからデータを取得し、そのデータをページに表示しています。リクエストが失敗した場合は、エラーメッセージが表示されます。

Fetch APIのポイント

Fetch APIを使用する際には、以下のポイントに注意する必要があります。

  • Promiseの使用: Fetch APIはPromiseを返します。Promiseを使うと、非同期処理をシンプルに扱うことができ、成功時と失敗時の処理を簡単に分けることができます。
  • エラーハンドリング: Fetch APIでは、ステータスコードが200以外でも成功したとみなされる場合があるため、response.okを使ってエラーチェックを行うことが推奨されます。
  • レスポンス形式: Fetch APIでは、レスポンスの形式を指定する必要があります。JSON形式のデータを扱う場合は、response.json()を使用してデータを解析します。

まとめ

Fetch APIは、サーバーと非同期通信を行うためのシンプルで強力な方法です。Promiseを使って非同期処理を扱いやすくし、エラーハンドリングを簡単に実装できます。今回は、Fetch APIを使ってサーバーからデータを取得し、その結果をページに表示する例を紹介しました。非同期通信を行う際には、エラーハンドリングやレスポンス形式のチェックをしっかり行うことが重要です。

スポンサーリンク