使用 chrome.storage.local.get 回调返回 undefined答案

【问题标题】：Callback returns undefined with chrome.storage.local.get使用 chrome.storage.local.get 回调返回 undefined
【发布时间】：2018-07-29 09:14:11
【问题描述】：

我的代码一直有同样的问题，我一直在努力解决这个问题。我的程序中有一个保存和读取功能。以下代码是我的代码的缩小版本。

functions.js

// Reads data from ChromeStorage
function read(key) {
    if(key != null) {
        chrome.storage.local.get(key, function (obj) {
            return obj;
        });
    }
}

// Saves data to ChromeStoarge
function save(key, obj) {
    var jsonfile = {};
    jsonfile[key] = obj;

    chrome.storage.local.set(jsonfile, function () {
        console.log('Saved');
    });
}

popup.html

<!DOCTYPE html>        
<html>
    <head>
        <title>Habit Breaker</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/functions.js"></script>
        <script type="text/javascript" src="js/popup.js"></script>

    </body>
</html>

popup.js

save("Test", "Hello");

read("Test");

manifest.json

{
    "manifest_version": 2,

    "name": "Problem",
    "description": "This extension has a huge problem",
    "version": "1.0",

    "permissions": [
        "storage"
    ],

    "browser_action": {
        "default_popup": "popup.html"
    }

}

当我调用 save 函数时，一切都按预期运行，数据已成功存储。但是当我调用 read 函数时，它返回一个未定义的。

奇怪的是，当我没有在保存函数中返回 obj 时，我 console.log() 它并返回了我的预期值。

我的想法开始用完了，我进行了许多小时的研究。如果有人有线索，将不胜感激。

【问题讨论】：

函数read(key)中没有return语句。其中return obj; 行属于chrome.storage.local.get 的回调函数，在read(key) 返回后调用。查看 Javascript 中的异步回调概念和/或使用 async 和 await。
谢谢@Iván，我会调查的！

标签： javascript json google-chrome-extension local-storage

【解决方案1】：

正如 Iván 所说，chrome.storage API 是异步的，您可以通过以下几种方式处理它：

1.回调函数

function read(key, callback) {
    if(key != null) {
        chrome.storage.local.get(key, function (obj) {
            callback(obj);
        });
    }
}

// Usage
read("test", function(val) {
  // val...
})

2.承诺

function read(key) {
    return new Promise((resolve, reject) => {
        if (key != null) {
            chrome.storage.local.get(key, function (obj) {
                resolve(obj);
            });
        } else {
            reject(null);
        }
    });
}

// 1. Classic usage
read('test')
    .then(function (val) {
        // val...
    })
    .catch(function () {
        // looks like key is null
    });

// 2. Use async/await
var val = await read(test);
console.log(val);

【讨论】：