如何在继续执行之前等待异步 chrome.storage.local.get() 完成答案

【问题标题】：How to wait for asynchronous chrome.storage.local.get() to finish before continuing execution如何在继续执行之前等待异步 chrome.storage.local.get() 完成
【发布时间】：2021-08-15 10:28:42
【问题描述】：

我有两个电话给chrome.storage.local.get()。在继续为我的 chrome 扩展程序执行其余代码（调用 continueCode() 函数）之前，我需要完成这些调用，但我不确定如何执行此操作，这是我的代码。

function getData() {
    chrome.storage.local.get(['key'], function(result) {
        if (Object.values(result)[0] != undefined) {
            object1.innerHTML = Object.values(result)[0].val;
        }
    });

    chrome.storage.local.get(['key2'], function(result) {
         if (Object.values(result)[0] != undefined) {
             object2.innerHTML = Object.values(result)[0].val;
         }
    });

    continueCode();
}

【问题讨论】：

标签： asynchronous google-chrome-extension google-chrome-storage

【解决方案1】：

您可以使用new Promise、async/await 来处理此问题。假设您要同步处理chrome.storage.local.get，以便continueCode() 可以拥有所需的数据。

获取数据：

  const readLocalStorage = async (key) => {
    return new Promise((resolve, reject) => {
      chrome.storage.local.get([key], function (result) {
        if (result[key] === undefined) {
          reject();
        } else {
          resolve(result[key]);
        }
      });
    });
  };

主要功能：


async function getData() {
    let key1 = await readLocalStorage('key1');
    object1.innerHTML = key1;
    let key2 = await readLocalStorage('key1');
    object1.innerHTML = key2;

    continueCode();
}

或者如果您不熟悉 async/await 行为。您可以将这 2 个 promise 包装到一个数组中并使用 Promise.all，如下所示：

function getData() {
    const key1 = readLocalStorage('key1');
    const key2 = readLocalStorage('key2');

    Promise.all([key1, key2]).then(values => {
        object1.innerHTML = values[0];
        object2.innerHTML = values[1];

        continueCode();
    });
}

【讨论】：

我需要new Promise，而不仅仅是Promise。
function async getData() 给了我一个错误。将代码更改为async function getData() 解决了它

【解决方案2】：

在调用continueCode()之前，您需要等待传递给chrome.storage.local.get(..)的两个回调函数都执行完毕，此外，您可以通过一次调用检查两个存储属性，这里是一个示例：

function getData() {
  chrome.storage.local.get(['key', 'key2'], function(result) {
    if (typeof result.key !== 'undefined') {
      object1.innerHTML = result.key.val;
    } 
    if (typeof result.key2 !== 'undefined') {
      object2.innerHTML = result.key2.val;
    } 
    continueCode();
  }
}

【讨论】：

我在存储和获取两个不同键的对象时遇到了一些问题，但我会尝试一下。
so continueCode() 将在检查 if 条件（如果它们为真）并设置对象的 innerHTML 后立即执行，因为在我的 continueCode() 中，我从HTML 通过调用document.getElementById()
@NoahTanenholtz 不，continueCode() 无论是否设置属性都会执行。
我遇到的问题是 object1 是一个表，我需要从表中删除、添加和排序行。在设置和更新 object1.innerHTML 之后，我需要能够执行此操作，我遇到的问题是它删除并添加了一些行，但在我继续重新加载之前不会删除或添加它需要的一些行网页。 Object1 和 Object2 在页面卸载之前存储。我可以添加一些代码，但不能添加太多，因为我需要将此项目的规范保密。
也许问题是我使用的是chrome.storage.local 而不是chrome.storage.sync？