Callback returns undefined with chrome.storage.sync.get
The chrome.storage
API is asynchronous - it doesn't return it directly, rather passing it as an argument to the callback function. The function call itself always returns undefined
.
This is often used to allow other methods to run without having to wait until something responds or completes - an example of this is setTimeout
(only difference is that it returns a timer value, not undefined
).
For example, take this:
setTimeout(function () { alert(1); }, 10000);
alert(0);
Because setTimeout
is asynchronous, it will not stop all code until the entire function completes, rather returning initially, only calling a function when it is completed later on - this is why 0 comes up before 1.
For this reason, you cannot simply 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 of writing asynchronous code:
function getValue(callback) {
chrome.storage.sync.get("value", callback);
}
You could place an entire portion of your code inside the callback - there's nothing stopping you from doing so. So 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);
});
Chrome storage API is asynchronous and it uses callback
, that's why you're getting this behavior.
You can use Promise
API to overcome this asynchronous issue, which is simpler and cleaner. 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");