Electron渲染进程中JSON文件读取函数莫名返回null问题求助

嘿，这个问题我太熟了！你遇到的核心问题是Node.js异步I/O的特性在搞鬼：

fs.readFile是异步非阻塞方法——调用它之后，JavaScript会立刻继续执行return jsonObj这行代码，而此时文件读取的回调函数还没被触发，jsonObj自然还是你初始设置的null。

至于断点后能正常运行？那是因为断点暂停了代码执行，给了足够时间让文件读取完成、回调函数执行，jsonObj被正确赋值后，再继续运行就能拿到预期结果了。

方案1：用同步读取（简单直接，适合小文件） #

如果你的JSON文件不大，不会造成界面卡顿，可以用fs.readFileSync（同步版本），它会等待文件读取完成后才继续执行代码：

function jsonParser(fileName){
    try {
        // 同步读取，直到完成才往下走
        const data = fs.readFileSync(fileName, 'utf8');
        console.log("read from file successfully");
        // 用原生JSON.parse替代jQuery.parseJSON更轻量，Electron环境完全兼容
        return JSON.parse(data);
        // 坚持用jQuery的话：return jQuery.parseJSON(data);
    } catch (err) {
        console.log(err);
        return null;
    }
}

方案2：Promise+async/await处理异步（推荐，无阻塞） #

如果不想阻塞渲染进程（比如文件较大），可以把异步读取封装成Promise，再用async/await让代码逻辑看起来像同步一样：

先修改jsonParser返回Promise：

function jsonParser(fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                reject(err);
                return;
            }
            console.log("read from file successfully");
            try {
                const jsonObj = JSON.parse(data);
                resolve(jsonObj);
            } catch (parseErr) {
                console.log('JSON解析出错:', parseErr);
                reject(parseErr);
            }
        });
    });
}

然后把点击事件改成异步函数：

loadObjectBtn.addEventListener('click', async function loadObject(event){
    try {
        myObject = await jsonParser('C:\\someFolder\\myApp\\myJsonFile.json');
        console.log(myObject);
        return myObject;
    } catch (err) {
        // 这里可以给用户加错误提示，比如弹窗显示"文件加载失败"
        console.error('加载对象失败:', err);
    }
})

小提醒 #

jQuery.parseJSON和原生JSON.parse功能几乎一致，在Electron的现代渲染进程里，完全可以直接用JSON.parse，减少不必要的依赖~

内容的提问来源于stack exchange，提问作者vanagandr13