chrome.storage.local 获取返回“未定义”

Question

我想通过 chrome.storage.local.get() 从 chrome 存储中获取 2 个值，但是如果我尝试从回调函数返回值，我会得到“未定义”。如果我 console.log() 它们，它们实际上已被记录。这是为什么？我在其他一些帖子中读到过，我需要使用回调 - 但就我对 JS 的基本理解而言，我已经从 get() 的回调函数返回了值。

// this should load 2 keys from an object stored in chrome storage
function loadJiraUrlElements(){
    chrome.storage.local.get({companyName: '', jiraBaseUrl: ''}, function(items) {
        return (items.companyName + items.jiraBaseUrl);
     })
}

// I want to use this function to call the return value and populate a DOM element
function populateUrlFieldsWithUrlElements(){
    companyInput.value = loadJiraUrlElements()
}

Answer 1

你得到undefined是因为你正在返回回调函数（即内部函数），而不是你试图从中获取返回值的外部函数。

您可以使用承诺，resolve以便您可以.then在populateUrlFieldsWithUrlElements函数中使用回调来获取所需的值：

function loadJiraUrlElements() {
  return new Promise(resolve => {
    chrome.storage.local.get({companyName: '', jiraBaseUrl: ''}, function(items) {
      resolve(items.companyName + items.jiraBaseUrl);
    })
  })
}

// I want to use this function to call the return value and populate a DOM element
function populateUrlFieldsWithUrlElements() {
  loadJiraUrlElements().then(result => {
    companyInput.value = result;
  })
}

或者，如果您不想使用回调，可以在第二个函数中使用async/ ：await.then

// I want to use this function to call the return value and populate a DOM element
async function populateUrlFieldsWithUrlElements() {
  companyInput.value = await loadJiraUrlElements();
}

Answer 2

它是一个async函数，您可以将其包装在 Promise 对象下或继续使用回调机制。

1.) 承诺：

function loadJiraUrlElements() {
    return new Promise(function(resolve, reject) {
        chrome.storage.local.get({companyName: '', jiraBaseUrl: ''}, function(items) {
            resolve(items.companyName + items.jiraBaseUrl);
         })
    });
}

// And caller function changes to 
function populateUrlFieldsWithUrlElements(){
    loadJiraUrlElements().then(function(value) {
        companyInput.value = value;
    })
}

2.) 回调：

function loadJiraUrlElements(cb){
    chrome.storage.local.get({companyName: '', jiraBaseUrl: ''}, function(items) {
        cb && cb(items.companyName + items.jiraBaseUrl);
     })
}

function populateUrlFieldsWithUrlElements(){
    loadJiraUrlElements(function(value) {
        companyInput.value = value;
    })

}