javascript - 使用异步 chrome.cookies.getAll 的结果

Question

我遇到了一个异步 JavaScript 问题，无法将回调方法中收到的值保存为对象文字。我正在制作一个 Chrome 扩展程序并使用 chrome.cookies.getAll 方法，并且能够获取 cookie 并在回调中读取它们，但我无法将值保存到对象中。我仍然掌握着对象和异步 JavaScript 的窍门，确实需要一些帮助。

这是代码

var app = {
    init: function() {
        this.activeCookie = {
            'sid': null
        };
        this.setupSession();
        // shows null
        console.log('session in object : ');
        console.log(this.activeCookie['sid']);
    },

    setupSession: function() {
        var that = this;

        function setCookiesAsync(that, cookie) {
            console.log(cookie);
            for(var i=0; i<cookie.length; ++i) {
                if(cookie[i]['name'] === 'sid') {
                    that.activeCookie['sid'] = cookie[i]['value'];
                    // shows a token
                    console.log('session in callback : ');
                    console.log(that.activeCookie['sid']);
                }
            }
        }

        chrome.cookies.getAll({
            'url': ST.BaseUrl
        }, function (cookie) {
            setCookiesAsync(that, cookie);

        });
    }
};

因为回调在之后执行

console.log('session in object : ');
console.log(this.activeCookie['sid']);

this.activeCookie['sid'] 为 null。

我想知道如何将值保存到对象，以便异步方法将它保存到对象，并在 setupSession() 完成后执行后续代码行。

Answer 1

虽然这个问题在 very canonical topic 上，它的措辞和范围都足够好，因此提供特定的解决方案也会有所帮助。

部分 init() 是异步执行的。这意味着当 init() 完成执行时，它的所有代码尚未运行。 没有办法解决这个问题 - 紧跟在异步部分之后的代码将在它之前运行。

但是，如果您有一些代码要在 init 之后专门执行(例如，您的其余代码!)，您可以通过将此代码作为回调传递来实现，将其添加到适当的位置:

init: function(callback) {
  this.activeCookie = {
    'sid': null
  };
  this.setupSession(callback);
},

setupSession: function(callback) {
  var that = this;

  function setCookiesAsync(that, cookie) {
    for(var i=0; i<cookie.length; ++i) {
      if(cookie[i]['name'] === 'sid') {
        that.activeCookie['sid'] = cookie[i]['value'];
      }
    }
    // This is the point where all of init() has finished
    if (typeof callback === "function") { callback(); }
  }

  chrome.cookies.getAll({
    'url': ST.BaseUrl
  }, function(cookie) {
    setCookiesAsync(that, cookie);
  });
}

那么你可以使用如下代码:

app.init(function() {
  /* code that should execute after init */
});

---

或者，您可以使用 Promises .

init: function() {
  this.activeCookie = {
    'sid': null
  };
  return this.setupSession(callback); // returns a Promise
},

setupSession: function() {
  return new Promise(function(resolve, reject) {
    var that = this;

    function setCookiesAsync(that, cookie) {
      for(var i=0; i<cookie.length; ++i) {
        if(cookie[i]['name'] === 'sid') {
          that.activeCookie['sid'] = cookie[i]['value'];
        }
      }
      // This is the point where all of init() has finished
      resolve();
    }

    chrome.cookies.getAll({
      'url': ST.BaseUrl
    }, function (cookie) {
      setCookiesAsync(that, cookie);
    });
  });
}

用法变为:

app.init().then(function() {
  /* code that should execute after init */
});