Помогите розобраться с этими промисами и асинхроностью)) Уже сил нету)
Описание:
Проект на котором практикуюсь - простой лендинг, на котором есть карточки, которые получаем с сервера (файла) в формате 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 выводить но ничего не получилось)
global.then(то, что вернул последний then из прошлого файла а тот - resolve => console.log(то, что вернул последний then из прошлого файла а тот - resolve)