onload event listener is not invoked after awaiting on an asynchronous function-CodePudding

My code loads a JSON file that is later used in a function called serverTest.

So I have this code:

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
}

The problem is that the load event handler does not run.

Can someone help me?

CodePudding user response：

The problem is that by delaying setting up the event handler until the JSON is loaded, you're missing the load event.

In the vast majority of use cases (but from the comments, not yours), just remove the event handler entirely:

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
}

If you make sure your script tag uses type="module" (which yours must do, if you're using top-level await like that), it won't be run until the page HTML is fully loaded and the DOM has been built. (Unless you also have the async attribute on it; details.)

In your use case, waiting for the load event genuinely does make sense, so you'll have to wait until both load and the fetch are done:

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
}

Side note: Notice I added a check for ok before calling json. fetch only rejects its promise on network errors, not HTTP errors. This is (IMHO) a footgun in the fetch API I cover on my old anemic blog here.