JavaScript Fetch API

概要: このチュートリアルでは、JavaScript Fetch API と、それを使用して非同期 HTTP リクエストを行う方法について学びます。

JavaScript Fetch API の概要

Fetch API は、Web ブラウザーから直接 HTTP リクエストを簡素化する強力で最新のツールです。

以前に XMLHttpRequest オブジェクトを使用したことがある方は、Fetch API が同じタスクをすべて処理できることに気づくでしょう。ただし、より優雅で簡単に行うことができます。

Fetch API は、Promise を活用し、サーバーとのやり取りをよりクリーンで柔軟な方法で提供します。これは、非同期リクエストとレスポンスをより直感的に処理するのに役立ちます。

fetch() はグローバル window オブジェクトのメソッドであり、1 つのコマンドで URL に HTTP リクエストを送信できます。データの取得、フォームの送信、API との対話など、Fetch API はプロセス全体を効率化し、コードを読みやすくします。

リクエストの送信

fetch() には、フェッチしたいリソースの URL という 1 つのパラメータのみが必要です。

fetch(url);Code language: JavaScript (javascript)

fetch() メソッドは Promise を返すため、then() および catch() メソッドを使用して処理できます。

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });Code language: JavaScript (javascript)

リクエストが完了すると、リソースが利用可能になり、Promise は Response オブジェクトに解決されます。

Response オブジェクトは、フェッチされたリソースの API ラッパーとして機能します。

レスポンスの読み取り

レスポンスに JSON データが含まれている場合、Response オブジェクトの json() メソッドを使用して解析できます。

json() メソッドは、フェッチされたリソースの完全な内容で解決される Promise を返し、JSON データにアクセスできるようにします。

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));Code language: JavaScript (javascript)

実際には、コードをより明確にするために、fetch() メソッドで async/await を使用することがよくあります。

const response = await fetch(url);
const data = await response.json();
console.log(data); // json dataCode language: JavaScript (javascript)

json() メソッドに加えて、Response オブジェクトには、それぞれデータ型を処理するための text()、blob()、formData()、arrayBuffer() などの他のメソッドがあります。

HTTP ステータスコードの処理

Response オブジェクトには、レスポンスの HTTP ステータスコードを提供する status プロパティがあります。

response.statusCode language: JavaScript (javascript)

HTTP ステータスコードを使用すると、リクエストが成功したかどうかを判断できます。

const response = await fetch(url);
if (response.status === 200) {
   // success
}Code language: JavaScript (javascript)

実際には、ステータスコードが 200 ～ 299 の範囲内にあるかどうかをチェックする便利なプロパティ ok を使用します。false の場合、リクエストは成功していません。

const response = await fetch(url);
if (!response.ok) {
   throw new Error(`HTTP error! Status: ${response.status}`);
}Code language: JavaScript (javascript)

JavaScript Fetch API の例

ユーザーのリストを返す次の API エンドポイントに GET リクエストを行います。

https://jsonplaceholder.typicode.com/usersCode language: JavaScript (javascript)

ステップ 1. プロジェクトファイルを保存するための fetch などの新しいディレクトリを作成します。

ステップ 2. プロジェクトディレクトリ内に index.html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Fetch API Demo</title>
        <script src="js/app.js" defer></script>
    </head>

    <body>
        <div id="root">
            <div id="content"></div>
            <p id="message"></p>
            <p id="loading"></p>
        </div>
    </body>

</html>Code language: HTML, XML (xml)

HTML ファイルには、3 つの要素を含むルート要素があります。

ユーザーリストをレンダリングするための #content。
エラーメッセージを表示するための #message。
読み込みメッセージを表示するための #loading。

ステップ 3. js ディレクトリ内に app.js を作成します。

const getUsers = async () => {
  const url = 'https://jsonplaceholder.typicode.com/users';
  const response = await fetch(url);
  return await response.json();
};

const render = (users) => {
  return users.map(({ name, email }) => `<li>${name} (${email})</li>`).join('');
};

(async () => {
  const users = await getUsers();
  document.querySelector('#content').innerHTML = `<ul>${render(users)}</ul>`;
})();Code language: JavaScript (javascript)

仕組み。

最初に、API エンドポイント: https://jsonplaceholder.typicode.com/users からデータをフェッチするために fetch() メソッドを使用する関数 getUsers を定義します。

const getUsers = async () => {
  const url = 'https://jsonplaceholder.typicode.com/users';
  const response = await fetch(url);
  return await response.json();
};Code language: JavaScript (javascript)

次に、画面にユーザーのリストを表示するための HTML スニペットを返す新しい関数 render を作成します。

const render = (users) => {
  return users.map(({ name, email }) => `<li>${name} (${email})</li>`).join('');
};Code language: JavaScript (javascript)

3 番目に、getUsers() 関数を呼び出し、画面にユーザーリストを表示する IIFE 関数を定義します。

(async () => {
  const users = await getUsers();
  document.querySelector('#content').innerHTML = `<ul>${render(users)}</ul>`;
})();Code language: JavaScript (javascript)

エラーの処理

Web リクエストを行う際に、ネットワークの停止、サーバーのダウンタイム、またはその他の接続の問題など、さまざまなエラーが発生する可能性があります。

エラーを処理するには、try...catch ステートメントを使用できます。

(async () => {
  try {
    // fetch the users
    const users = await getUsers();

    // show the user list
    document.querySelector('#content').innerHTML = `<ul>${render(users)}</ul>`;
  } catch (err) {
    // show the error message
    document.querySelector('#message').textContent = err.message;
  }
})();Code language: JavaScript (javascript)

この例では、エラーが発生した場合、catch ブロックが実行され、エラーメッセージがコンソールに記録され、ユーザーフレンドリーなエラーメッセージがユーザーに表示されます。

これをテストするには、API エンドポイントを無効な URL に変更できます (例:

https://jsonplaceholder.typicode.net/usersCode language: JavaScript (javascript)

(.com を .net に変更)、次に index.html ファイルを開きます。ページには次のエラーメッセージが表示されます。

Error getting usersCode language: JavaScript (javascript)

また、コンソールウィンドウには次のエラーが表示されます。

GET https://jsonplaceholder.typicode.net/users net::ERR_NAME_NOT_RESOLVEDCode language: JavaScript (javascript)

読み込みインジケーターの表示

ネットワークが遅い場合、空白のページがしばらく表示され、ユーザーエクスペリエンスが低下します。

これを強化するために、データのフェッチ中に読み込みメッセージを表示できます。

そのためには、次のように IIFE 関数を変更できます。

(async () => {
  // show the loading element
  const loadingElem = document.querySelector('#loading');
  loadingElem.innerHTML = 'Loading...';
  try {
    // fetch the users
    const users = await getUsers();

    // show the user list
    document.querySelector('#content').innerHTML = `<ul>${render(users)}</ul>`;
  } catch (err) {
    // show the error message
    document.querySelector('#message').textContent = err.message;
  } finally {
    loadingElem.innerHTML = '';
  }
})();Code language: JavaScript (javascript)

リクエストを行う前に、読み込みメッセージを '読み込み中...' に設定します。

const loadingElem = document.querySelector('#loading');
loadingElem.innerHTML = 'Loading...';Code language: JavaScript (javascript)

リクエストが完了したら、成功したかどうかにかかわらず、finally ブロックで空白に設定して読み込みメッセージをクリアします。

// ...
finally {
    loadingElem.innerHTML = '';
}Code language: JavaScript (javascript)

ネットワーク速度が十分に速い場合、読み込みメッセージが表示されない可能性があることに注意してください。読み込みメッセージをテストするには、次のようにネットワーク遅延をシミュレートできます。

(async () => {
  // show the loading element
  const loadingElem = document.querySelector('#loading');
  loadingElem.innerHTML = 'Loading...';

  // simulate network delay
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  await delay(2000); // delay 2 seconds

  try {
    // fetch the users
    const users = await getUsers();

    // show the user list
    document.querySelector('#content').innerHTML = `<ul>${render(users)}</ul>`;
  } catch (err) {
    // show the error message
    document.querySelector('#message').textContent = err.message;
  } finally {
    loadingElem.innerHTML = '';
  }
})();Code language: JavaScript (javascript)

このコードでは、リクエストを行う前に 2 秒の遅延を導入するために、次のスニペットを含めています。

// simulate network delay
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
await delay(2000); // delay 2 secondsCode language: JavaScript (javascript)

プロジェクトソースコードのダウンロード

プロジェクトソースコードをダウンロードするには、ここをクリックしてください

HTTP POST リクエストの作成

title、body、および userId を使用して新しいブログ投稿を作成する次の API エンドポイントに HTTP POST リクエストを作成する方法を示します。

<code>https://jsonplaceholder.typicode.com/posts</code>Code language: HTML, XML (xml)

ステップ 1. プロジェクトファイルを保存する新しいディレクトリを作成します。

ステップ 2. プロジェクトディレクトリに新しい index.html ファイルを作成します。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Fetch API Demo - HTTP POST</title>
        <meta name="robots" content="noindex">
        <script src="js/app.js" defer></script>
    </head>
    <body>
    </body>

</html>Code language: HTML, XML (xml)

index.html ファイルには、ヘッダーに js/app.js ファイルが含まれています。

ステップ 3. 次のコードで新しい js/app.js ファイルを作成します。

async function create(blogPost) {
  try {
    // Create the URL
    const url = 'https://jsonplaceholder.typicode.com/posts';

    // Create the headers
    const headers = {
      'Content-Type': 'application/json',
    };

    // Create the POST body
    const body = JSON.stringify({
      title: blogPost.title,
      body: blogPost.body,
      userId: blogPost.userId,
    });

    // Send the POST request
    const response = await fetch(url, { method: 'POST', headers, body });

    // Check the response status
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Parse the JSON response
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    // Handle any errors
    console.error('Error:', error);
  }
}

create({
  title: 'Test Post',
  body: 'This is a test post',
  userId: 1,
});Code language: JavaScript (javascript)

仕組み。

最初に、投稿オブジェクトを受け入れる新しいブログ投稿を作成する関数を定義します。

async function create(post)Code language: JavaScript (javascript)

次に、POST リクエストが送信される URL エンドポイントを構築します。

const url = 'https://jsonplaceholder.typicode.com/posts';Code language: JavaScript (javascript)

3 番目に、リクエストとともに送信される HTTP ヘッダーを作成します。

const headers = {
  'Content-Type': 'application/json',
};Code language: JavaScript (javascript)

リクエストの本文が JSON 形式であることを指示するために、'Content-Type' ヘッダーを 'application/json' に設定します。

4 番目に、JSON.stringify() メソッドを使用して、投稿オブジェクトを JSON 文字列にシリアル化して、POST リクエストの本文を作成します。

const body = JSON.stringify({
  title: post.title,
  body: post.body,
  userId: post.userId,
});Code language: JavaScript (javascript)

これは、blogPost オブジェクトに title、body、および userId プロパティがあることを前提としています。

5 番目に、fetch() メソッドを使用して POST リクエストを送信します。

const response = await fetch(url, {
    method: 'POST',
    headers,
    body
});Code language: JavaScript (javascript)

この構文では、

url: POST リクエストを送信する API エンドポイント。
method: 'POST': これは HTTP POST リクエストであることを指定します。
headers: リクエストにヘッダーを含めます。
body: HTTP POST リクエストの本文に含まれる JSON 文字列が含まれています。

fetch() メソッドは Response オブジェクトを返します。

6 番目に、レスポンスステータスを確認し、リクエストが成功しなかった場合はエラーをスローします。

if (!response.ok) {
  throw new Error(`HTTP error! Status: ${response.status}`);
}Code language: JavaScript (javascript)

7 番目に、JSON レスポンスを解析し、データをコンソールウィンドウに記録します。

const data = await response.json();
console.log('Success:', data);Code language: JavaScript (javascript)

8 番目に、リクエスト中に発生したエラーをキャッチし、コンソールに記録します。

catch (error) {
  console.error('Error:', error);
}Code language: JavaScript (javascript)

最後に、title、body、および userId プロパティを含むブログ投稿オブジェクトを使用して、create() 関数を呼び出します。

create({
  title: 'Test Post',
  body: 'This is a test post',
  userId: 1,
});Code language: JavaScript (javascript)

ステップ 4. Web ブラウザーで index.html を開きます。HTTP POST リクエストを行う app.js ファイルが実行されます。

ステップ 5. コンソールウィンドウを開くと、リクエストが成功した場合、次のメッセージが表示されます。

プロジェクトソースコードのダウンロード

プロジェクトソースコードをダウンロードするには、ここをクリックしてください

概要

Fetch API は、XMLHttpRequest オブジェクトと比較して、HTTP リクエストを行うためのよりシンプルで柔軟な方法を提供します。
URL に非同期 Web リクエストを行うには、fetch() メソッドを使用します。
fetch() は、Response オブジェクトに解決される Promise を返します。
リクエストが成功したかどうかを確認するには、Response オブジェクトの status または ok プロパティを使用します。
コンテンツを JSON データに解析するには、Response オブジェクトの json() メソッドを使用します。
HTTP リクエストを行う際のエラーを処理するには、try...catch ステートメントを使用します。

このチュートリアルは役立ちましたか?

JavaScript Fetch API の概要

リクエストの送信

レスポンスの読み取り

HTTP ステータス コードの処理

JavaScript Fetch API の例

エラーの処理

読み込みインジケーターの表示

プロジェクト ソース コードのダウンロード

HTTP POST リクエストの作成

プロジェクト ソース コードのダウンロード

概要

HTTP ステータスコードの処理

プロジェクトソースコードのダウンロード

プロジェクトソースコードのダウンロード