在等待异步功能后，不调用onload事件侦听器

Question

我的代码加载了一个JSON文件，该文件后来在称为servertest的函数中使用。

因此，我有此代码：

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
}

问题是负载事件处理程序未运行。

有人可以帮我吗？

Answer 1

问题在于，通过延迟设置事件处理程序直到加载JSON，您就缺少load事件。

在绝大多数用例中（但是来自评论，而不是您的评论），只需完全删除事件处理程序：

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
}

如果您确保您的脚本标签使用type> type =“ module”（如果您使用的是Top级等待这样），则必须这样做），它将在页面html满载并构建DOM之前运行。 （除非您还在其上具有async属性; 详细信息。）

在您的用例中，等待load事件确实很有意义，因此您必须等到两个load> load> 和完成了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
}

---

附带注意：注意我在调用ok之前添加了检查json。 提取仅拒绝其在网络上的承诺错误，而不是http错误。这是（IMHO）fetch api i在我旧的贫血博客上覆盖的脚步在这里。