失敗を画面に出す

実践JavaScript / 全 5 枚

実践JavaScript - 失敗を画面に出す

コンソールで終わらせない

作品一覧の取得に失敗したとき、console.error だけ書いて終わると、画面は空のまま止まって見えます。catch で受け取った失敗を、利用者が読める文言として決まった場所に出します。

先頭の hidden = true が、前回の失敗の文言を消す役です。ここが無いと、次に成功しても文言が残ります。

文言を出す場所は #error の 1 か所に決めて、読み込みを始めるたびに隠し直します。

async function showWorks() {
  const box = document.querySelector("#error");
  box.hidden = true;

  try {
    const works = await fetchWorks();
    render(works);
  } catch (error) {
    box.textContent = "作品を読み込めませんでした";
    box.hidden = false;
    console.error(error);
  }
}

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く