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

今回は、fetch でエラーが発生した場合の処理方法を紹介します。

前回と同じ、API で犬の画像を取得し、ブラウザで表示します。

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

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));
};
getData();

今のところ、API が取得できなかった場合のエラーの処理ができていません。

エラーの処理をするには、catchを使います。

catchは、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))
    .catch((err) => console.error(`画像が取得できませんでした:${err}`));
};

fetchの URL を削除して、確認すると、

image2

エラーの処理ができています。

ブラウザで、『画像を取得できませんでした』と表示してみます。

HTML でテキストを表示する場所を作っておきましょう。

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

getElementByIdで、テキストの場所を指定します。

let message = document.getElementById("message");

catchconsole.error()を修正します。

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))
    .catch(() => (message.innerText = "画像を取得できませんでした"));
};

fetchの URL を削除して、確認すると、

image3

『画像を取得できませんでした』と表示されました。

例えば、URL の『random』を『randoms』にして、アドレスを少し変えてみましょう。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/randoms")
    .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))
    .catch(() => (message.innerText = "画像を取得できませんでした"));
};

catchが機能せず、404 のエラーが発生しました。

image4

URL の『random』を『randoms』の場合で、thenresconsole.logで比較すると、

randonm の場合

image5

randoms の場合

image6

random の場合は、status が 200 で、ok が true になり、randoms の場合は、status が 404 で、ok が false になっています。

ok が false の場合、エラーとすれば解決します。

then(res)の中に、エラーの処理を追加します。

const getData = function () {
  fetch("https://dog.ceo/api/breeds/image/randoms")
    .then((res) => {
      if (!res.ok)
        throw new Error(
          console.error(`データが見つかりませんでした status:${res.status}`)
        );

      return res.json();
    })

確認すると、

image7

URL のアドレス間違いでも、エラーの処理ができました。

ブログ一覧