Mi código carga un archivo JSON que luego se usa en una función llamada serverTest .
Así que tengo este código:
async function fetchJSON(url) { const response = await fetch(url, { headers: { accept: "application/json" } }); return response.json(); } const config = await fetchJSON("./config.json"); window.addEventListener("load", function() { serverTest(0); }); const serverList = new Map(Object.entries(config.servers)); function serverTest(index) { // code including serverList }El problema es que el controlador de eventos de carga no se ejecuta.
¿Alguien me puede ayudar?
El problema es que al retrasar la configuración del controlador de eventos hasta que se carga el JSON, se está perdiendo el evento de load .
En la gran mayoría de los casos de uso (pero de los comentarios, no de los suyos), simplemente elimine el controlador de eventos por completo:
async function fetchJSON (url) { const response = await fetch(url, { headers: { accept: "application/json" } }); if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } return response.json(); } const config = await fetchJSON("./config.json"); serverTest(0); // <==== Not wrapped in a `load` event handler const serverList = new Map(Object.entries(config.servers)); function serverTest(index) { //Code including serverList } Si se asegura de que su etiqueta de secuencia de script use type="module" (lo que debe hacer la suya, si está usando una await de nivel superior como esa), no se ejecutará hasta que la página HTML esté completamente cargada y el DOM haya sido construido. (A menos que también tenga el atributo async ; detalles ).
En su caso de uso, esperar el evento de load realmente tiene sentido, por lo que tendrá que esperar hasta que finalicen la load y la fetch :
async function fetchJSON (url) { const response = await fetch(url, { headers: { accept: "application/json" } }); if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } return response.json(); } // Hook up the `load` event *before* loading `config.json`, // get a promise for when it fires const loadPromise = new Promise(resolve => { window.addEventListener("load", resolve); }); // Load and wait for `config.json` const config = await fetchJSON("./config.json"); // Wait for the `load` event (waits only ***very*** briefly // if the event has already fired, otherwise waits for it // to fire) await loadPromise(); serverTest(0); const serverList = new Map(Object.entries(config.servers)); function serverTest(index) { //Code including serverList } Nota al margen: tenga en cuenta que agregué un cheque para ok antes de llamar a json . fetch solo rechaza su promesa sobre errores de red , no sobre errores de HTTP. Esto es (en mi humilde opinión) una pistola en la API de fetch que cubro en mi antiguo blog anémico aquí .