Товары из файла

До сих пор начальные товары были записаны прямо в script.js. Приложения обычно хранят данные отдельно от кода, в файле или на сервере, и загружают их при открытии страницы. Ваш список будет делать так же. Его начальные товары теперь лежат в файле items.json на третьей вкладке редактора. Это те же товары, что и в массиве, плюс кофе — так вы увидите, что список пришёл из файла.

Загружать файл вы умеете из урока «Данные с сервера». fetch() запрашивает его, ответ приходит через мгновение, поэтому async-функция ждёт его с помощью await. response.ok сообщает, найден ли файл, а await response.json() превращает его JSON в массив объектов, точно такой же, как в items:

async function loadItems() {
    const response = await fetch("items.json");
    items = await response.json();
    showItems();
}

Функция кладёт в items новый массив, а константе нельзя присвоить новое значение, поэтому теперь создайте items через let. Сначала это пустой массив [], потому что пока файл не пришёл, список пуст.

Почему loadItems() сама вызывает showItems()? Потому что товары появляются только после await. Код после loadItems(); в конце скрипта выполняется сразу, раньше чем придёт файл, поэтому вызов showItems() там показал бы пустой список.

Загрузка занимает какое-то время: треть секунды в окне просмотра, несколько секунд при медленном соединении. Пока она идёт, хорошее приложение сообщает, что происходит. А если файл загрузить не удалось, оно говорит и об этом, а не просто показывает пустой список.

Типичные ошибки:

• Оставить const items. Тогда в консоли появится TypeError: Assignment to constant variable.
• Забыть await перед response.json(). Тогда в items окажется промис вместо массива, и showItems() завершится ошибкой TypeError: items is not iterable.