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í .