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

今回は、fetchを使用して、前回使用した API を取得してみます。

まずは、getData関数を作成します。

const getData = function () {

};

fetchを使って、API を取得します。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/random")
  });
};

今のままでは何も処理されないので、thenを使ってどのような処理をするか書きます。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/random").then((res) => {
    console.log(res)
  });
};

getData();で関数を実行してみます。

image2

API を呼び出すことができました。

データを使えるようにするため、JSON を呼び出します。

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

image3

さらに、JSON データを呼び出してみます。

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

image4

JSON データを呼び出すことができました。

最後に、message の URL を使って、ブラウザに犬の画像を表示させてみます。

let img = document.getElementById("image");

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

image5

犬の画像が表示されました。

ブログ一覧