Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

232
Views
el detector de eventos onload no se invoca después de esperar en una función asíncrona

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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!