How to synchronously execute a function using chrome.storage.local.get and XMLHttpRequest?

Question

function get_pps_params(callback)
{
    var ppsParams = null;
    chrome.storage.local.get(['ppsParams'], function(result) {
        if ($.isEmptyObject(result))
        {
            var oReq = new XMLHttpRequest();
            oReq.open("GET", CLOUD_SERVER + 'get_pps_params', true);
            oReq.responseType = "arraybuffer";

            oReq.onload = function (oEvent) {
                console.log("Got pps params compressed!");
                ppsParams = oReq.response; // Note: not oReq.responseText
                chrome.storage.local.set({ppsParams: _arrayBufferToBase64(ppsParams)});
            };

            oReq.send();
        }
        else
        {
            ppsParams = _base64ToArrayBuffer(result.ppsParams);
        }
        callback(ppsParams);
    });
}

I am using the above function to retrieve certain parameters from local storage and if they are not present in local storage then the chrome.storage.local.get callback sends request for the data to server. This makes the whole get_pps_params asynchronous(obviously). So how do I make it execute synchronously ? I read something about jQuery.Deferred but did not understand it.

Currently callback(ppsParams) gives me null if the request is sent to server because of the async nature of XMLHttpRequest.

@JaromandaX yeah I had only asked that question previosuly but now the situation is somewhat different from that. — bawejakunal, Jul 12 '15 at 05:04

score 2 · Accepted Answer · answered Jul 12 '15 at 05:11

2

Similar solution to last time

function get_pps_params(callback)
{
    var ppsParams = null;
    chrome.storage.local.get(['ppsParams'], function(result) {
        if ($.isEmptyObject(result))
        {
            var oReq = new XMLHttpRequest();
            oReq.open("GET", CLOUD_SERVER + 'get_pps_params', true);
            oReq.responseType = "arraybuffer";

            oReq.onload = function (oEvent) {
                console.log("Got pps params compressed!");
                ppsParams = oReq.response; // Note: not oReq.responseText
                chrome.storage.local.set({ppsParams: _arrayBufferToBase64(ppsParams)});
                callback(ppsParams); // added this line
            };

            oReq.send();
        }
        else
        {
            ppsParams = _base64ToArrayBuffer(result.ppsParams);
            callback(ppsParams); // moved this line
        }
    });
}

answered Jul 12 '15 at 05:11

Jaromanda X

53,868
5
73
87

Yeah that should work, though I wanted to know about jquery.Deferred more. Thanks :) – bawejakunal Jul 12 '15 at 05:13
I don't know that I'd bother with jquery.Deferred, either. Even if I wanted to use the jQuery API instead of native XHR, I would use the success handler. – Greg Pettit Jul 12 '15 at 05:14
if you rewrite this to use jquery.Deferred, you wouldn't use a callback, you'd return a promise and call this using `get_pps_params().then( ...` – Jaromanda X Jul 12 '15 at 05:22
dont use jquery use standard js promise. – Zig Mandel Jul 12 '15 at 06:18
@ZigMandel - as long as you have a decent browser, IE need not apply – Jaromanda X Jul 12 '15 at 06:21
then there is a polifill for older ones isnt it? not worth learning the jquery one when they are different from the now standard – Zig Mandel Jul 12 '15 at 06:23

Jaromanda X · Answer 2 · 2015-07-12T05:32:57.360

If you really want to use jquery.Deferred

function get_pps_params()
{
    var ppsParams = null;
    var def = jQuery.Deferred();
    chrome.storage.local.get(['ppsParams'], function(result) {
        if ($.isEmptyObject(result))
        {
            var oReq = new XMLHttpRequest();
            oReq.open("GET", CLOUD_SERVER + 'get_pps_params', true);
            oReq.responseType = "arraybuffer";

            oReq.onload = function (oEvent) {
                console.log("Got pps params compressed!");
                ppsParams = oReq.response; // Note: not oReq.responseText
                chrome.storage.local.set({ppsParams: _arrayBufferToBase64(ppsParams)});
                def.resolve(ppsParams);
            };

            oReq.send();
        }
        else
        {
            ppsParams = _base64ToArrayBuffer(result.ppsParams);
            def.resolve(ppsParams);
        }
    });
    return def.promise();
}

instead of

get_pps_params(someFunc);

use

get_pps_params().then(someFunc);

You can achieve the same result using proper Promise - comes standard with any decent browser, or use a polyfill for non-decent browsers

function get_pps_params()
{
    return new Promise(function(resolve, reject) {
        var ppsParams = null;
        chrome.storage.local.get(['ppsParams'], function(result) {
            if ($.isEmptyObject(result))
            {
                var oReq = new XMLHttpRequest();
                oReq.open("GET", CLOUD_SERVER + 'get_pps_params', true);
                oReq.responseType = "arraybuffer";

                oReq.onload = function (oEvent) {
                    console.log("Got pps params compressed!");
                    ppsParams = oReq.response; // Note: not oReq.responseText
                    chrome.storage.local.set({ppsParams: _arrayBufferToBase64(ppsParams)});
                    resolve(ppsParams);
                };

                oReq.send();
            }
            else
            {
                ppsParams = _base64ToArrayBuffer(result.ppsParams);
                resolve(ppsParams);
            }
        });
    });
}

once again you'd use the

get_pps_params().then(someFunc);

method

How to synchronously execute a function using chrome.storage.local.get and XMLHttpRequest?

2 Answers2