JavaScriptFetchAPIを使用してデータを取得する方法

投稿日: 2022-04-20 2022-04-20

序章

XMLHttpRequestを使用してAPIリクエストを作成したことがあります。 Promisesは含まれていませんでしたし、クリーンなJavaScriptコードも作成されませんでした。 jQueryを使用すると、jQuery.ajax()のよりクリーンな構文を使用できます。

現在、JavaScriptには、APIリクエストを作成するための独自の組み込みの方法があります。これはFetchAPIであり、Promisesを使用してサーバーリクエストを行うための新しい標準ですが、追加機能も含まれています。

このチュートリアルでは、FetchAPIを使用してGETリクエストとPOSTリクエストの両方を作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
JavaScriptでのコーディングの基本的な理解。これについては、JavaScriptでコーディングする方法シリーズから詳しく知ることができます。
JavaScriptでのPromisesの理解。 JavaScriptのイベントループ、コールバック、Promises、およびasync /awaitに関するこの記事のPromisesセクションをお読みください。

ステップ1—FetchAPI構文の開始

Fetch APIを使用する1つの方法は、fetch()にAPIのURLをパラメーターとして渡すことです。

fetch(url)

fetch()メソッドはPromiseを返します。 fetch()メソッドの後に、Promiseメソッドthen()を含めます。

fetch(url)
  .then(function() {
    // handle the response
  })

返されたPromiseがresolveの場合、then()メソッド内の関数が実行されます。この関数には、APIから受信したデータを処理するためのコードが含まれています。

then()メソッドの後に、catch()メソッドを含めます。

fetch(url)
  .then(function() {
    // handle the response
  })
  .catch(function() {
    // handle the error
  });

fetch()を使用して呼び出すAPIがダウンしているか、その他のエラーが発生している可能性があります。この場合、rejectプロミスが返されます。 catchメソッドは、rejectを処理するために使用されます。選択したAPIの呼び出し時にエラーが発生した場合、catch()内のコードが実行されます。

Fetch APIを使用するための構文を理解すると、実際のAPIでfetch()を使用することに進むことができます。

ステップ2—Fetchを使用してAPIからデータを取得する

次のコードサンプルは、 JSONPlaceholderAPIに基づいています。 APIを使用すると、10人のユーザーを取得し、JavaScriptを使用してページに表示します。このチュートリアルでは、JSONPlaceholder APIからデータを取得し、作成者のリスト内のリストアイテムに表示します。

まず、HTMLファイルを作成し、authorsのidを使用して見出しと順序なしリストを追加します。

authors.html

<h1>Authors</h1>
<ul id="authors"></ul>

次に、HTMLファイルの下部にscriptタグを追加し、DOMセレクターを使用してulを取得します。引数としてauthorsを指定してgetElementByIdを使用します。

authors.html

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
</script>

authorsは、以前に作成されたulのidであることを忘れないでください。

次に、DocumentFragmentであるlistを作成します。

authors.html

<script>
  // ...

  const list = document.createDocumentFragment();
</script>

追加されたリスト項目はすべてlistに追加されます。 DocumentFragmentは、アクティブなドキュメントツリー構造の一部ではありません。これには、ドキュメントオブジェクトモデルが変更されたときにパフォーマンスに影響を与える再描画を引き起こさないという利点があります。

urlという定数変数を作成します。この変数は、10人のランダムなユーザーを返すAPIURLを保持します。

authors.html

<script>
  // ...

  const url = 'https://jsonplaceholder.typicode.com/users';
</script>

ここでFetchAPIを使用し、fetch()を引数としてurlを使用してJSONPlaceholderAPIを呼び出します。

authors.html

<script>
  // ...

  fetch(url)
</script>

Fetch APIを呼び出し、URLをJSONPlaceholderAPIに渡します。その後、応答が受信されます。ただし、取得する応答はJSONではなく、情報をどのように処理するかに応じて使用できる一連のメソッドを持つオブジェクトです。返されたオブジェクトをJSONに変換するには、json()メソッドを使用します。

responseというパラメーターを持つ関数を含むthen()メソッドを追加します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {})
</script>

responseパラメーターは、fetch(url)から返されたオブジェクトの値を取ります。 json()メソッドを使用して、responseをJSONデータに変換します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
</script>

JSONデータは引き続き処理する必要があります。 dataという引数を持つ関数を使用して別のthen()ステートメントを追加します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {})
</script>

この関数内で、dataと等しく設定されるauthorsという変数を作成します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;
    })
</script>

authorsの作成者ごとに、名前を表示するリストアイテムを作成する必要があります。 map（）メソッドは、次のパターンに適しています。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {

      });
    })
</script>

map関数内で、li（HTML要素）を引数としてcreateElementと等しく設定されるliという変数を作成します。また、nameにはh2を作成し、emailにはspanを作成します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');
      });
    })
</script>

h2要素には、authorのnameが含まれます。 span要素には、authorの電子メールが含まれます。 innerHTMLプロパティと文字列補間により、次のことが可能になります。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;
      });
    })
</script>

次に、これらのDOM要素をappendChildに接続します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    })

  ul.appendChild(list);
</script>

各リスト項目はDocumentFragmentlistに追加されていることに注意してください。 mapが完了すると、listがulの順序付けされていないリスト要素に追加されます。

両方のthen()機能が完了したので、catch()機能を追加できるようになりました。この関数は、潜在的なエラーをコンソールに記録します。

authors.html

<script>
  // ...

  fetch(url)
    .then((response) => {
      // ...
    })
    .then((data) => {
      // ...
    })
    .catch(function(error) {
      console.log(error);
    });

  // ...
</script>

これは、作成したリクエストの完全なコードです。

authors.html

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>

JSONPlaceholderAPIとFetchAPIを使用してGETリクエストを正常に実行しました。次のステップでは、POSTリクエストを実行します。

ステップ3—POSTリクエストの処理

FetchのデフォルトはGETリクエストですが、他のすべてのタイプのリクエストを使用したり、ヘッダーを変更したり、データを送信したりできます。 POSTリクエストを作成しましょう。

まず、JSONPlaceholderAPIへのリンクを保持する定数変数を含めます。

new-author.js

const url = 'https://jsonplaceholder.typicode.com/users';

次に、オブジェクトを設定し、それをフェッチ関数の2番目の引数として渡す必要があります。これは、キーnameと値Sammy（またはあなたの名前）を持つdataというオブジェクトになります。

new-author.js

// ...

let data = {
  name: 'Sammy'
}

これはPOSTリクエストであるため、明示的に指定する必要があります。 fetchDataというオブジェクトを作成します。

new-author.js

// ...

let fetchData = {

}

このオブジェクトには、method、body、およびheadersの3つのキーを含める必要があります。

new-author.js

// ...

let fetchData = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
}

methodキーの値は'POST'になります。 bodyは、作成されたばかりのdataオブジェクトのJSON.stringify（）形式と同じに設定されます。 headersの値は'Content-Type': 'application/json; charset=UTF-8'になります。

HeadersインターフェースはFetchAPIのプロパティであり、HTTPリクエストヘッダーとレスポンスヘッダーに対してアクションを実行できます。 Express でルートとHTTPリクエストメソッドを定義する方法と呼ばれるこの記事は、より多くの情報を提供することができます。

このコードを配置すると、FetchAPIを使用してPOSTリクエストを行うことができます。 urlとfetchDataをfetchPOSTリクエストの引数として含めます。

new-author.js

// ...

fetch(url, fetchData)

then()関数には、JSONPlaceholderAPIから受信した応答を処理するコードが含まれます。

new-author.js

// ...

fetch(url, fetchData)
  .then(function() {
    // Handle response you get from the API
  });

これは、作成したリクエストの完全なコードです。

new-author.js

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
}

let fetchData = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
}

fetch(url, fetchData)
  .then(function() {
    // Handle response you get from the API
  });

または、fetch()にRequestオブジェクトを渡すこともできます。

new-author-request.js

const url = 'https://jsonplaceholder.typicode.com/users';

let data = {
  name: 'Sammy'
}

let request = new Request(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
});

fetch(request)
  .then(function() {
    // Handle response you get from the API
  });

このアプローチでは、requestをfetch()の唯一の引数として使用し、urlとfetchDataを置き換えることができます。

これで、FetchAPIを使用してPOSTリクエストを作成および実行するための2つの方法がわかりました。

結論

Fetch APIはまだすべてのブラウザでサポートされているわけではありませんが、XMLHttpRequestの優れた代替手段です。

Reactを使用してWebAPIを呼び出す方法を知りたい場合は、このトピックに関するこの記事を確認してください。

getdocs

13036