Почему у меня не работает асинхронная загрузка данных через fetch?

elvin

Пишу небольшое приложение и пытаюсь подгрузить данные с JSON-файла через fetch(), но данные не отображаются. В консоли ошибок нет код вроде бы логичный, но console.log(data) внутри then() не срабатывает. Что я упускаю?

async function loadData() {
  fetch('https://myapi.ru/posts/1')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      document.getElementById('output').textContent = data.title;
    })
    .catch(error => {
      console.error('Ошибка загрузки:', error);
    });
}

loadData();

console.log('Данные загружены!');

Сразу скажу что файл точно доступен (проверял в браузере), CORS тоже не выдает проблем…

kirilljsx

Твоя функция loadData() не использует await, при этом явно не возвращает промис.
Тебе либо полностью переписать функцию на async/await либо работать через .then()

Алекс44

Брат, у тебя точно файл лежит в правильной директории? Проверь путь и если пишешь просто data.json, он должен быть в той же папке, что и твой HTML. И сервер локальный запущен? Без него fetch может не сработать из-за CORS.

Wowk

Согласен. И ещё посмотри расширение файла — иногда в Windows скрывается .txt, даже если ты назвал data.json. Включи отображение расширений и перепроверь. У меня так было, два часа дебажил.

Игорь_И

И не забудь проверить, что сервер возвращает правильный Content-Type: application/json. Иногда если файл отдаётся как text/plain, браузер не парсит его как JSON. Открой вкладку “Сеть” в DevTools и посмотри заголовки ответа.