javascript - getting the return data of a async function inside a function

Question

I am having a problem because chrome api functions are async and I cant get its return value. Consider the following code. I am using angularjs

    $scope.storageGet = function(param) {
        var returnData; 

        chrome.storage.local.get(param.storageName, function(data) {
            returnData = data;
        });

        return returnData;
    };

And when I tried to call it like this:

    console.log($scope.storageGet({'storageName': 'users'}));

It prints 'undefined' in the console. What I want to see is the obect of users stored in chrome storage. Well, I'm sure that I have data in chrome storage.

Answer 1

Another way is to use a promise. In this case it might not matter but if you have a a lot of nested callbacks then a promise is better.

$scope.storageGet = function(param) {
    var deferred = $q.defer();

    chrome.storage.local.get(param.storageName, function(data) {
        deferred.resolve(data);
    });

    return deferred.promise;
};

And then you call it like this.

$scope.storageGet(param).then(function (data) {

});

Answer 2

You cannot return data that is generated by an async function such as chrome.storage.local.get, because more likely your function will finish executing before the async function executes. This is why your function returns undefined, which is the default value of returnData.

A good alternative will be to make your function async as well by using a callback function.

$scope.storageGet = function(param, callback) {
    chrome.storage.local.get(param.storageName, function(data) {
        callback(data);
    });
};

Now you can call your function this way:

$scope.storageGet(param, function(returnData) {
    // do something with returnData
});