The callback returns undefined with chrome.storage.sync.get

Question

I am creating a Chrome extension and I wrote this code.

var Options = function(){}; Options.prototype = { getMode: function(){ return chrome.storage.sync.get("value", function(e){ console.log(e); // it prints 'Object {value: "test"}'. return e; }); }, setMode: function(){ chrome.storage.sync.set({"value": "test"}, function(e) { }) } } var options = new Options(); options.setMode(); console.log(options.getMode()); // it prints 'undefined'. 

I expected him to print

 Object {value: "set up"} 

when i call options.getMode() but it prints undefined .

Does anyone know how to solve this problem?

Answer 1

chrome.storage API is asynchronous - it does not return it directly, but passes it as an argument to the callback function. The function call itself always returns undefined .

This is often used to allow other methods to start without having to wait for something to respond or complete - an example of this is setTimeout (the only difference is that it returns a timer value, not an undefined ).

For example, take this:

 setTimeout(function () { alert(1); }, 10000); alert(0); 

Since setTimeout is asynchronous, it will not stop all code until the whole function completes, but will return at the beginning, calling only the function when it will be completed later - that’s why 0 goes up to 1.

---

For this reason, you cannot just do something like:

 // "foo" will always be undefined var foo = asyncBar(function (e) { return e; }); 

Generally, you should put what you want to do in your callback (the function that is called when the asynchronous function is completed). This is a fairly common way to write asynchronous code:

 function getValue(callback) { chrome.storage.sync.get("value", callback); } 

You can put all of your code in a callback - nothing prevents you from doing this. Therefore, instead of doing the following:

 console.log(getValue()); // typical synchronous method of doing something 

This would probably be a better idea:

 // how it would be done in asynchronous code getValue(function (value) { console.log(value); }); 

Answer 2

chrome.storage.sync.get is called asynchronously, so you must pass a callback to it so that it will be executed in the future.

When you try to print the return value of getMode , you print the return value of any chrome.storage.sync.get returned after the sequence of the asynchronous call to be made.

This is a common mistake people make in javascript while they learn to use asynchronous calls.

Answer 3

The Chrome storage API is asynchronous and uses callback , so you get this behavior.

You can use the Promise API to overcome this asynchronous problem, which is simpler and more understandable. Here is an example:

 async function getLocalStorageValue(key) { return new Promise((resolve, reject) => { try { chrome.storage.sync.get(key, function (value) { resolve(value); }) } catch (ex) { reject(ex); } }); } const result = await getLocalStorageValue("my-key");