13

我正在构建一个 Chrome 扩展程序，并编写了这段代码。

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'.

我希望它打印出来

Object {value: "set up"}

当我打电话时options.getMode()，它会打印出来undefined。

有谁知道如何解决这个问题？

4

3 回答 3

22

chrome.storageAPI 是异步的——它不直接返回它，而是将它作为参数传递给回调函数。函数调用本身总是返回undefined。

这通常用于允许其他方法运行而不必等到某些响应或完成 - 这方面的一个例子是setTimeout（唯一的区别是它返回一个计时器值，而不是undefined）。

例如，采取这个：

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

因为setTimeout是异步的，所以在整个函数完成之前它不会停止所有代码，而是最初返回，只有在稍后完成时才调用一个函数——这就是为什么 0 在 1 之前出现的原因。

因此，您不能简单地执行以下操作：

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

一般来说，你应该把你想做的事情放在你的回调中（异步函数完成时调用的函数）。这是编写异步代码的一种相当常见的方式：

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

您可以将整个代码部分放在回调中 - 没有什么可以阻止您这样做。因此，不要执行以下操作：

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

这可能是一个更好的主意：

// how it would be done in asynchronous code
getValue(function (value) {
  console.log(value);
});
于 2013-09-09T13:17:59.687 回答
8

Chrome 存储 API是异步的，它使用callback，这就是你得到这种行为的原因。

您可以使用PromiseAPI 来克服这个异步问题，它更简单、更干净。这是一个例子：

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");
于 2019-08-19T06:19:06.607 回答
2

被异步调用，这chrome.storage.sync.get就是为什么你必须向它传递一个回调，以便它在将来执行。

当您尝试打印的返回值时，您正在打印排队要执行的异步调用后getMode返回的任何返回值。chrome.storage.sync.get

这是人们在学习使用异步调用时在 javascript 中常犯的错误。

于 2013-09-09T13:18:07.180 回答