Fetch js что это?

Fetch — интерфейс сетевого запроса, результатом которого служит Promise с Response. Объект ответа и его тело — разные этапы: после await fetch('/api/items') обычно еще выполняют await response.json(), чтобы получить разобранные данные. Между этими действиями проверяйте response.ok и решайте, как обработать неуспешный HTTP-статус. Ответ 404 не обязан отклонять Promise запроса. Ошибка сети или разбора JSON может попасть в catch, если ожидание находится в try/catch. После разбора отдельно проверьте нужные поля и типы. Для другого источника доступ определяется CORS, а no-cors не позволяет обойти ограничения чтения ответа. Два await здесь отражают два этапа работы, а не повторную отправку одного запроса.

Fetch выполняет сетевой запрос и возвращает Promise с объектом Response. Первый await ожидает ответ, а второй часто нужен для чтения и разбора тела, например await response.json().

Проверяйте response.ok: HTTP-ошибка вроде 404 сама по себе не обязана отклонять Promise fetch. Сетевые ошибки, ошибки разбора и неподходящие данные требуют своей обработки.

1. Выполните запрос внутри async-функции или другого контекста, где разрешен await: const response = await fetch('/api/items');. В браузере относительный адрес относится к текущему сайту.
2. Проверьте статус ответа. Если response.ok ложно, обработайте неуспешный HTTP-статус. Fetch обычно не считает сам факт ответа 404 сетевой ошибкой и может успешно вернуть объект Response.
3. Прочитайте тело в нужном формате. Для JSON используйте const data = await response.json();. Это отдельная асинхронная операция, поэтому появляется второй await.
4. Учитывайте ошибку разбора. Даже ответ с успешным статусом может содержать не JSON, например страницу ошибки от другого звена сервера. Тогда json завершится ошибкой.
5. Проверьте структуру полученного значения. Корректный JSON не гарантирует, что data является массивом нужных объектов. Это уже правило вашего приложения.
6. Оберните ожидаемые операции в try/catch или предусмотрите обработку отклонения другим способом. Покажите пользователю понятное состояние ошибки, а подробности сохраняйте в подходящем месте диагностики.
7. Если обращаетесь к другому источнику, учитывайте CORS. Режим no-cors не открывает произвольный доступ к содержимому чужого ответа: полученный непрозрачный ответ нельзя читать как обычный JSON.
8. Для отмены ненужного запроса рассмотрите AbortController. Это полезно, когда пользователь ушел со страницы или запустил новый поиск, а старый результат больше не нужен.
9. Не пытайтесь читать одно и то же тело несколько раз без предусмотренного решения. Сначала определите формат ответа и последовательность обработки. Для вашего случая достаточно проверки статуса, одного разбора JSON и проверки данных.