Tengo dos archivos, uno está obteniendo datos del backend y el otro está agregando funciones y cosas de trabajo a los datos que regresaron. Anteriormente, estaba haciendo esto usando localStorage y localStorage es rápido y puede acceder a los elementos fuera de cualquier archivo, pero debido a que ambos archivos se cargarán al mismo tiempo, y los datos del backend tomarán algún tiempo, el archivo tiene dos funciones y todo no funciona, estoy usando defer en ambas etiquetas de script . Lo que pienso de la solución es cómo cargar el archivo 2 después de que se hayan cargado los datos del archivo 1, pero no conozco la sintaxis y todo para hacerlo. Cualquier ayuda será apreciada :)
//File 1 function callProductDetails() { const sendLocalId = JSON.parse(localStorage.getItem('mytest') ?? "[]"); fetch("/apps/selliy/localProduct", { method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(sendLocalId) }).then(function (response) { // The API call was successful! return response.json(); }).then(function (data) { console.log(data); product_carousel_wrapper.innerHTML = data.map(productData => `<h1 class="hye">${productData.title}</h1>` ).join(''); }); } ```js //File 2 const hye = document.querySelector('.hye'); hye....... // Do something with hyeCree una nueva función en file 2 (por ejemplo processData() ) y envuelva su código dentro de él. Llame a esa función desde file 1 después de que se complete su fetch (dentro del segundo .then() o en el lugar apropiado según sus requisitos)
Archivo 2
function processData() { const hye = document.querySelector('.hye'); hye....... // Do something with hye }Archivo 1
function callProductDetails() { const sendLocalId = JSON.parse(localStorage.getItem('mytest') ?? "[]"); fetch("/apps/selliy/localProduct", { method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(sendLocalId) }).then(function (response) { // The API call was successful! return response.json(); }).then(function (data) { console.log(data); product_carousel_wrapper.innerHTML = data.map(productData => `<h1 class="hye">${productData.title}</h1>` ).join(''); // Call function from file 2 from here processData(); }); }