Angular JavaScript中的异步调用

Question

I am trying to read async from a file angularJs. Having a horrible time trying to make the variable mySuperFile available outside of the callback. Please see code below.

fs.readFile('myfile','utf8', function (err, data){
    var mySuperFile = JSON.parse(data);
});

//I want mySuperFile available HERE

Answer 1

Because readFile is asynchronous, everything that uses this must also be asynchronous.

Here is an approach:

var fetchMySuperFile = new Promise(function(resolve, reject) {
   fs.readFile('myfile','utf8', function (err, data){
       resolve(JSON.parse(data));
   });
};

fetchMySuperFile.then(function(mySuperFile) {
   // OK, you have it now.
});

This can still be useful. The nature of javascript promises is you can invoke fetchMySuperFile.then multiple times, but it will still have only called readFile one time.

Of course, since it's angular, you might want to use $q instead of Promise . The reason why is that, after a $q has resolved, angular refreshes. (You won't need to invoke $scope.$apply() )

Answer 2

Due to async nature of js, you can't do something like this:

var mySuperFile;
fs.readFile('myfile','utf8', function (err, data){
    mySuperFile = JSON.parse(data);
});
console.log(mySuperFile);

This is because the line console.log( mySuperFile ); won't wait until the function above finished.