Загрузка и ошибки

При медленном соединении серверу могут понадобиться несколько секунд, чтобы ответить. Всё это время странице нечего показать, и пользователь не знает, придёт ли вообще что-нибудь. Поэтому страницы, пока ждут, показывают сообщение вроде Загрузка…, как Печём вашу пиццу… в пиццерии из предыдущего урока, а когда данные пришли — убирают его.

А иногда у сервера нет того, что просит страница. Он всё равно отвечает, но вместо файла присылает ошибку с номером, который называется статусом. Самую известную из них вы, возможно, видели на сайтах: 404 Not Found — такого адреса нет, например, потому что имя файла написано с ошибкой. Для fetch() это не ошибка: ответ есть ответ. Если скрипт затем прочитает его через response.json(), то получит текст Not Found, который не является JSON, и завершится ошибкой SyntaxError: … "Not Found" is not valid JSON.

Для этого и существует response.ok: он равен true, если сервер прислал файл (статус 200, OK), и false, если ответил ошибкой. Проверяйте его до того, как читать данные:

async function loadAnimals() {
    message.textContent = "Загрузка…";
    const response = await fetch("animals.json");
    if (!response.ok) {
        message.textContent = "Не удалось загрузить животных.";
        return;
    }
    const animals = await response.json();
    message.textContent = "";
    // Здесь показываем животных...
}

Сообщение Загрузка… выставляется до fetch(), поэтому оно остаётся на странице всё время, пока скрипт ждёт. Если ответ не OK, скрипт показывает сообщение об ошибке и завершает функцию через return. Иначе он очищает сообщение и показывает данные.

А что, если соединения нет вовсе? Тогда ответа не будет, и сам fetch() завершится ошибкой TypeError: Failed to fetch. Такую ошибку можно перехватить с помощью try/catch из предыдущего урока. В окне предпросмотра файлы упражнения отвечают всегда, поэтому здесь вы будете проверять response.ok.