前回は、XMLHttpRequestを使用して、API を取得できるようにしました。

前回は、fetch を使って API を呼び出す方法を紹介しました。

今回は、複数回 fetch を使って API を呼び出す方法を紹介します。

犬の写真を 2 箇所、ブラウザに表示したいと考えています。

<img src="#" alt="" id="image1" /> <img src="#" alt="" id="image2" />

それぞれgetElementByIdを使って、imgタグの場所を指定しておきます。

let img1 = document.getElementById("image1");
let img2 = document.getElementById("image2");

まずは、1 枚目の画像を API で呼び出します。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/random")
    .then((res) => res.json())
    .then((apiData) => {
      img1.src = apiData.message;
    });
};
getData();

image2

犬の画像を呼び出すことができました。

続けて、2 枚目の画像も API で呼び出してみます。

まずは、1 回目の画像を表示した後、再びfetchで API を取得します。

fetchした API は、returnで返します。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/random")
    .then((res) => res.json())
    .then((apiData) => {
      img1.src = apiData.message;

      return fetch("https://dog.ceo/api/breeds/image/random");
    })
};

thenを使って画像を表示させます。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/random")
    .then((res) => res.json())
    .then((apiData) => {
      img1.src = apiData.message;

      return fetch("https://dog.ceo/api/breeds/image/random");
    })
    .then((res) => res.json())
    .then((apiData) => (img2.src = apiData.message));
};

ブラウザで確認すると、

image3

fetchを 2 回使って、画像を 2 枚呼び出すことができました。

以下のコードのように、thenの中にfetchの一連の流れを書いても動作しますが、コードが読みづらくなります。

fetchを続けて使う場合は、fetchreturnで返すようにしましょう。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/random")
    .then((res) => res.json())
    .then((apiData) => {
      img1.src = apiData.message;

      return fetch("https://dog.ceo/api/breeds/image/random").then((res) =>
        res.json().then((apiData) => (img2.src = apiData.message))
      );
    });
};
ブログ一覧