Асинхронный код и передача данных промиса в переменную

Question

Помогите розобраться с этими промисами и асинхроностью)) Уже сил нету)

Описание:

Проект на котором практикуюсь - простой лендинг, на котором есть карточки, которые получаем с сервера (файла) в формате json. С этими карточками делаем различные действия: генерируются слайдеры, генерируется каталог карточек, так же при клике на карточку генирируется модальное окно, с данными из того же json файла. Всего карточек порядка 10-20 штук.

И что хотелось бы сделать - получить все данные из json файла и поместить их в глобальную переменную, чтобы не делать множество запросов к серверу, а только один и после использовать просто переменную, в которой хранится вся информация.

И здесь у меня проблемы) Я могу делать запрос, получать промис, парсить его, получать данные и сразу же с ними работать (например передать в функцию, которая будет рендерить карточки на странице).

Так же я могу передать полученые данные в переменную cards, но у меня не получается имортировать (передать) эту переменную в глобальную область видимости - в файл main.js (получаю undefined), что-бы ее можно было передавать в любую функцию.

Не могу понять что происходит, передается пустая переменная, так как асинхронный код еще не выполнился, или промис, который не может отработать?

Я просто хочу получить данные от сервера, поместить их в переменную, передать в глобальную область видимости и использовать их. Но так как получение асинхронное, то как гарантировать, что когда я где-то буду использовать переменную она уже будет иметь данные?

Модуль запроса

const getResourse = async (url) => {
  let res = await fetch(url);
  if (!res.ok) {
    throw new Error(`Could not fetch ${url}, status: ${res.status}`);
  }
  return await res.json();
};

export { getResourse };

Модуль в котором пулучаю данные и записываю в переменную.

import { getResourse } from '../services/request';
let cards;  //переменная для хранения данных
const getCards = (url) => {
  getResourse(url)
    .then(res => {
      cards = res;  // присваем получиные данные переменной
    })
    .catch(error => console.log(error));

  setTimeout(() => {
    console.log(cards);  //все работает данные получены.
  }, 2000);
}
export default getCards;

Главный файл

import getCards from "./modules/getCards";

document.addEventListener('DOMContentLoaded', () => {
  'use strict';

  getCards('./resources/db/cards.json');
});

В main.js я пыталась и переменные создавать, и передавать в них функцию, и импортировать переменную, и через setTimeOut выводить но ничего не получилось)

БЛОГ НА HUSL

Асинхронный код и передача данных промиса в переменную

Ответы (0 шт):