Функция чтения файла JSON таинственным образом возвращает ноль, в электронном

Question

Я пишу электронное приложение, которое требует, чтобы я прочитал из файла и проанализировал его содержимое в объект javascript, используя jQuery, и у меня возникли проблемы. В настоящий момент myObject (см. В коде) возвращает ноль, когда он должен возвращать живой объект javascript, проанализированный из файла json. Код, который я использую, приведен ниже, и, возможно, стоит указать, что он написан в процессе рендеринга. Я довольно новичок в javascript, поэтому вполне может быть что-то очевидное, что мне не хватает.

loadObjectBtn.addEventListener('click', function loadObject(event){

    myObject = jsonParser('C:\\someFolder\\myApp\\myJsonFile.json')
    console.log(myObject)
    return myObject
})

function jsonParser(fileName){

    var jsonObj = null
    fs.readFile(fileName, 'utf8', function (err,data){
        if(err){
            return console.log(err)
        }
        console.log("read from file successfully")
        jsonObj = jQuery.parseJSON(data)
    }) 
    return jsonObj
}

Интересно, если я запускаю код с точкой останова на строке:

return jsonObj

в функции jsonParser()код работает и возвращает правильное значение для myObject, Кто-нибудь из вас, ребята, знает, почему это может быть, или у вас есть предложение по альтернативному коду?

Спасибо за прочтение!

Answer 1

fs.readFile это асинхронная функция Что это значит, в то время как ваш jsonParser выполняет и return jsonObj; выполняется, он еще не был инициализирован (это произойдет позже асинхронно, когда ваш обратный вызов fs.readFile вызывается). Вот почему это undefined

Вы можете изменить свой jsonParser функция для принятия обратного вызова, которую вы можете использовать, чтобы передать проанализированные данные после того, как это сделано для вашей основной функции.

Образец:

loadObjectBtn.addEventListener('click', function loadObject(event){

    jsonParser('C:\\someFolder\\myApp\\myJsonFile.json',function(err, data){
        //Check for error
        if(err){
            // Handle error
            return;
        }
        // Data is available here
        console.log(data)
    })

})

function jsonParser(fileName, cb){
    cb = (cb && typeof cb === 'function' && cb) || function(){};
    fs.readFile(fileName, 'utf8', function (err,data){
        if(err){
            // Error happened, call the cb function with the error as first argument
            cb(err)
        }
        //It worked, parse and hand the data back to the callback
        var jsonObj = jQuery.parseJSON(data)
        cb(null,jsonObj);
    }) 
}

Удобная ссылка на понимание ошибки первого колбэка

РЕДАКТИРОВАТЬ: Добавление ссылки, совместно используемой @Archer в комментариях Асинхронный против синхронного выполнения, что это действительно означает?

Альтернативой (хотя обычно не рекомендуется) является использование синхронной версии fs.readFileSync

Связанный вопрос по readFile против readFileSync

Answer 2

Это потому что fs.readFile является асинхронным, пройдет некоторое время, прежде чем данные станут доступны. Вот почему мы передаем функцию обратного вызова всем асинхронным вызовам. Вот небольшое переписывание:

loadObjectBtn.addEventListener('click', function loadObject(event){
    jsonParser('C:\\someFolder\\myApp\\myJsonFile.json', printJSON)
})

function printJSON (jsonData) {
    console.log("read from file successfully");
    jsonObj = jQuery.parseJSON(jsonData);
    console.log(jsonObj);
}

function jsonParser(fileName, callback){
    var jsonObj = null;
    fs.readFile(fileName, 'utf8', function (err,data){
        if(err){
            return console.log(err)
        }
        return callback(data)
    })
}