javascript – 无功能返回Chrome存储空间API值

在过去的两天里,我一直在使用chrome异步存储.如果你有一个功能,它的工作“很好”. (如下)：

chrome.storage.sync.get({"disableautoplay": true}, function(e){
console.log(e.disableautoplay);
});

我的问题是我无法使用我正在做的功能.我想像LocalStorage一样返回它.就像是：

var a = chrome.storage.sync.get({"disableautoplay": true});

要么

var a = chrome.storage.sync.get({"disableautoplay": true}, function(e){
    return e.disableautoplay;
});

我已经尝试了一百万种组合,甚至设置一个公共变量并设置：

var a;
window.onload = function(){
    chrome.storage.sync.get({"disableautoplay": true}, function(e){
    a = e.disableautoplay;
});
}

什么都行不通.它都返回undefined,除非引用它的代码在get函数内部,这对我来说没用.我只是希望能够将值作为变量返回.

这甚至可能吗？

编辑：这个问题不重复,请允许我解释原因：

1：没有其他帖子专门询问这个问题(我花了两天时间先查看,以防万一).

2：我的问题仍未得到解答.是的,Chrome Storage是异步的,是的,它不会返回值.那就是问题所在.我将在下面详细说明……

我需要能够在chrome.storage.sync.get函数之外获取存储值.我无法使用localStorage,因为它是特定于URL的,并且无法从chrome扩展的browser_action页面和background.js访问相同的值.我无法使用一个脚本存储值并使用另一个脚本访问它.他们分开对待.

所以我唯一的解决方案是使用Chrome存储.必须有某种方法来获取存储项的值并在get函数之外引用它.我需要在if语句中检查它.

就像localStorage可以做的那样

if(localStorage.getItem("disableautoplay") == true);

必须有一些方法可以做一些事情

if(chrome.storage.sync.get("disableautoplay") == true);

我意识到这不会那么简单,但这是我解释它的最佳方式.

我看到的每个帖子都说这样做：

chrome.storage.sync.get({"disableautoplay": true, function(i){
    console.log(i.disableautoplay);
    //But the info is worthless to me inside this function.
});
//I need it outside this function.

解决方法:

好的,很好,你可以得到你的问题的定制答案.它仍然是90％长的解释为什么你不能绕过异步,但忍受我 – 它会帮助你一般.我保证最终会有一些与chrome.storage相关的东西.

在我们开始之前,我将重申规范链接：

> After calling chrome.tabs.query, the results are not available
(特定于Chrome,RobW的优秀答案,可能最容易理解)
> Why is my variable unaltered after I modify it inside of a function? – Asynchronous code reference(关于你所要求的一般规范参考)
> How do I return the response from an asynchronous call?
(关于异步JS的一个较旧但同样受人尊敬的规范问题)
> You Don’t Know JS: Async & Performance(关于JS异步性的电子书)

那么,让我们来讨论JS异步性.

第1节：它是什么？

要涵盖的第一个概念是运行时环境.在某种程度上,JavaScript嵌入在另一个控制其执行流程的程序中 – 在本例中为Chrome.发生的所有事件(计时器,点击等)都来自运行时环境. JavaScript代码注册事件的处理程序,这些事件由运行时记住,并在适当时调用.

其次,理解JavaScript是单线程的很重要.运行时环境维护一个事件循环;如果在事件发生时执行了某些其他代码,则将该事件放入队列中以在当前代码终止时进行处理.

看看这段代码：

var clicks = 0;

someCode();
element.addEventListener("click", function(e) {
  console.log("Oh hey, I'm clicked!");
  clicks += 1;
});
someMoreCode();

那么,这里发生了什么？当此代码执行时,当执行到达.addEventListener时,会发生以下情况：通知运行时环境,当事件发生时(单击元素),它应该调用处理函数.

重要的是要理解(虽然在这种特殊情况下很明显)该函数不会在此时运行.只有在事件发生时才会运行.一旦运行时确认’我将运行(或“回调”,因此名称为“回调”),当发生这种情况时,执行就会继续执行.如果someMoreCode()尝试访问点击次数,则它将为0,而不是1.

这就是所谓的异步性,因为这是在当前执行流程之外发生的事情.

第2部分：为什么需要它,或者为什么同步API会消失？

现在,一个重要的考虑因素假设someMoreCode()实际上是一段非常长时间运行的代码.如果点击事件仍然在运行时会发生什么？

JavaScript没有中断的概念.运行时将看到代码正在执行,并将事件处理程序调用放入队列中.在someMoreCode()完成之前,处理程序不会执行.

虽然单击事件处理程序在某种意义上是极端的,即不能保证单击发生,但这解释了为什么您不能等待异步操作的结果.这是一个不起作用的例子：

element.addEventListener("click", function(e) {
  console.log("Oh hey, I'm clicked!");
  clicks += 1;
});
while(1) {
  if(clicks > 0) {
    console.log("Oh, hey, we clicked indeed!");
    break;
  }
}

您可以点击内容,但增加点击次数的代码会耐心地等待(非终止)循环终止.哎呀.

请注意,这段代码不仅冻结了这段代码：我们等待时不再处理每个事件,因为只有一个事件队列/线程. JavaScript中只有一种方法可以让其他处理程序完成它们的任务：终止当前代码,让运行时知道在我们想要的东西发生时调用什么.

这就是异步处理应用于另一类调用的原因：

>要求运行时而不是JS执行某些操作(例如磁盘/网络访问)
>保证终止(无论成功还是失败)

让我们来看一个经典的例子：AJAX调用.假设我们要从URL加载文件.

>假设在我们当前的连接上,运行时可以以100ms内可在JS中使用的形式请求,下载和处理文件.
>在另一个连接上,这有点糟糕,需要500毫秒.
>有时连接非常糟糕,因此运行时将等待1000毫秒并放弃超时.

如果我们要等到这个完成,我们就会有一个变量,不可预测和相对较长的延迟.由于JS等待的工作原理,所有其他处理程序(例如UI)都不会为此延迟执行任务,从而导致冻结页面.

听起来很熟悉？是的,这正是XMLHttpRequest同步的工作方式.它代替了JS代码中的while(1)循环,它实际上发生在运行时代码中 – 因为JavaScript在等待时不能让其他代码执行.

是的,这允许熟悉的代码形式：

var file = get("http://example.com/cat_video.mp4");

但在一切都冻结的可怕,可怕的代价.事实上,现代浏览器认为这个已被弃用,这是一个非常糟糕的代价.这是discussion on the topic on MDN.

现在让我们看看localStorage.它匹配“终止对运行时的调用”的描述,但它是同步的.为什么？

简单地说：历史原因(这是一个非常古老的规范).

虽然它比网络请求更可预测,但localStorage仍然需要以下链：

JS code <-> Runtime <-> Storage DB <-> Cache <-> File storage on disk

这是一个复杂的事件链,需要暂停整个JS引擎.这导致what is considered unacceptable performance.

现在,Chrome API从一开始就专为提高性能而设计.您仍然可以在较旧的API中看到一些同步调用,例如chrome.extension,并且有些调用是在JS中处理的(因此可以理解为同步),但chrome.storage是(相对)新的.

因此,如果在运行时执行某些操作时出现延迟,则为embraces the paradigm “I acknowledge your call and will be back with results, now do something useful meanwhile”.与XMLHttpRequest不同,这些调用没有同步版本.

引用文档：

It’s [chrome.storage] asynchronous with bulk read and write operations, and therefore faster than the blocking and serial localStorage API.

第3节：如何拥抱异步性？

处理异步性的经典方法是回调链.

假设您有以下同步代码：

var result = doSomething();
doSomethingElse(result);

假设,现在,doSomething是异步的.然后这变成：

doSomething(function(result) {
  doSomethingElse(result);
});

但如果它更复杂呢？说它是：

function doABunchOfThings() {
  var intermediate = doSomething();
  return doSomethingElse(intermediate);
}

if (doABunchOfThings() == 42) {
  andNowForSomethingCompletelyDifferent()
}

嗯..在这种情况下,您需要在回调中移动所有这些.返回必须成为一个电话.

function doABunchOfThings(callback) {
  doSomething(function(intermediate) {
    callback(doSomethingElse(intermediate));
  });
}

doABunchOfThings(function(result) {
  if (result == 42) {
    andNowForSomethingCompletelyDifferent();
  }
});

这里有一系列回调：doABunchOfThings立即调用doSomething,终止,但稍后调用doSomethingElse,其结果通过另一个回调传递给if.

显然,这种分层可能会变得混乱.好吧,没有人说JavaScript是一种很好的语言..欢迎来到Callback Hell.

有一些工具可以使它更易于管理,例如Promises.我不会在这里讨论它们(空间不足),但它们并没有改变基本的“这段代码只能在以后运行”部分.

TL部分; DR：我绝对必须让存储同步,停止！

有时候有合法的理由可以使用同步存储.例如,webRequest API阻塞调用不能等待.或者回调地狱会让你付出沉重的代价.

你可以做的是拥有异步chrome.storage的同步缓存.它带来了一些成本,但并非不可能.

考虑：

var storageCache = {};
chrome.storage.sync.get(null, function(data) {
  storageCache = data;
  // Now you have a synchronous snapshot!
});
// Not HERE, though, not until "inner" code runs

如果您可以将所有初始化代码放在一个函数init()中,那么您有：

var storageCache = {};
chrome.storage.sync.get(null, function(data) {
  storageCache = data;
  init(); // All your code is contained here, or executes later that this
});

当init()中的代码执行时,以及之后在init()中分配了处理程序的任何事件发生时,将填充storageCache.你已经将异步性降低到了一个回调.

当然,这只是存储在执行get()时所看到的内容的快照.如果要保持与存储的一致性,则需要通过chrome.storage.onChanged events设置storageCache的更新.由于JS的单事件循环特性,这意味着只有在代码不运行时才会更新缓存,但是很多情况都是可以接受的.

同样,如果要将对storageCache的更改传播到实际存储,仅设置storageCache [‘key’]是不够的.您需要编写一个set(key,value)垫片,BOTH写入storageCache并调度(异步)chrome.storage.sync.set.

实施这些是留下的练习.

标签：javascript,function,return-value,google-chrome-extension,google-chrome-storage
来源： https://codeday.me/bug/20190923/1813506.html