加载.js文件数据失败，控制台提示Live reload enabled该如何解决？

你遇到的功能不生效问题是代码中多个拼写、变量引用错误导致的，具体问题及修复如下：

存在的问题 #

• 事件监听名称拼写错误：DOMContentLoarded 应为 DOMContentLoaded，拼写错误导致页面加载完成后没有触发对应的执行逻辑，你的函数从未运行
• 变量名引用错误：你将接口返回的JSON数据赋值给了urlfound变量，但遍历的时候错误使用了未定义的datafound变量
• 请求URL包含前置空格：地址字符串开头多余的空格可能导致请求路径异常，无法正确拿到接口数据
• 缺少异常捕获逻辑：异步请求的错误没有被捕获，所以控制台不会打印对应报错，只会显示热重载工具的Live reload enabled提示，无法定位问题
• 额外说明：需要确认你接口返回的JSON结构是否确实包含array属性，如果接口直接返回数组，直接遍历urlfound即可，不需要加.array

修正后的代码 #

const container = document.querySelector('.datalink')
let listdata = async() => {
    try {
        // 移除URL前置空格
        let url = 'http://localhost:3000/indusboards';
        const urlfetch = await fetch(url);
        // 先判断请求是否成功
        if(!urlfetch.ok) throw new Error(`请求错误：${urlfetch.status}`)
        const urlfound = await urlfetch.json();
        let template = '';
        // 修正变量名，如果接口直接返回数组就去掉后面的.array
        urlfound.array.forEach(element => {
            template += `
                <div class ="element">
                <p><small>${element.serialno}</small></p>
                <p><small>${element.boardtest}</small></p>
                <p><small>${element.testresul}</small></p>
                <p><small>${element.serialno}</small></p>
                <p><small>${element.testdate}</small></p>
                <p><small>${element.testtime}</small></p>
                <p><small>${element.boardlocation}</small></p>
                <a href = "/json_projet/details.html">.... more</a>
                </div>
            `
        })
        container.innerHTML = template;
    } catch (err) {
        // 打印错误方便定位
        console.error('执行出错：', err)
    }
}

// 修正事件名拼写
window.addEventListener('DOMContentLoaded', () => listdata());

修正后刷新页面即可看到报错或者正常渲染内容，若仍然有问题可以查看控制台打印的具体错误信息排查。

内容的提问来源于stack exchange，提问作者Jean Raben H. Almonor