JavaScript

【JavaScript】fetchでエラーが発生した場合の処理方法

作成日：2021年10月04日

更新日：2021年10月04日

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

【JavaScript】複数回fetchを使って、APIを呼び出す方法

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

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

js
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の後に書きます。

js
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 を削除して、確認すると、

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

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

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

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

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

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

catchのconsole.error()を修正します。

js
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 を削除して、確認すると、

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

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

js
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 のエラーが発生しました。

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

randonm の場合

randoms の場合

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

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

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

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