Файл с сервера

Теперь запросим у сервера данные. Функция fetch() запрашивает файл по указанному адресу. Адрес работает так же, как в <script src="script.js">: "recipes.json" — это файл recipes.json рядом со страницей.

Ответ приходит не сразу, ведь запрос должен дойти до сервера и вернуться. Поэтому fetch() возвращает Promise — значение, которое придёт позже, как вы знаете из предыдущего урока, — и его нужно дождаться с помощью await:

async function loadAnimals() {
    const response = await fetch("animals.json");
    const animals = await response.json();
    console.log(animals[0].name);
}

loadAnimals();
console.log("Спрашиваем сервер…");

Спрашиваем сервер…
Рекс

Получение данных занимает два шага:

1. await fetch("animals.json") ждёт ответа сервера — response. Он сообщает, как прошёл запрос, и содержит содержимое файла.
2. await response.json() читает содержимое и превращает его из JSON в массивы и объекты, как это делает JSON.parse(). Чтение тоже занимает время, поэтому у него свой await.

Оба await должны находиться в функции async. И посмотрите на порядок вывода: loadAnimals() отправляет запрос, и пока ждёт ответа, остальной скрипт продолжает работать. Данные приходят только потом.

Поэтому типичная ошибка — использовать данные за пределами функции:

let animals = [];

async function loadAnimals() {
    const response = await fetch("animals.json");
    animals = await response.json();
}

loadAnimals();
console.log(animals.length);

0

Когда выполняется console.log(), сервер ещё не ответил, поэтому animals по-прежнему пустой массив. Всё, что требует данных, должно находиться внутри функции, после await, или в функции, которую вызывают оттуда.