javascript - ES6 Promises 和类属性

Question

作为一名业余 PHP 编码员，我很难掌握 JS 异步行为。我正在编写一个 Firefox WebExtension，它使用 Storage API 中的两个 StorageAreas 来设置/获取选项，我想将所有选项合并到一个对象中以有效地传递应用程序:

'use strict';
class Options {

  constructor() {
    this.defaults = {};
    this.locals = {};
    this.options = {};
  }

  getDefaults() {
    browser.storage.managed.get().then(res => {
      this.defaults = res;
    });
  }

  getLocals() {
    browser.storage.local.get().then(res => {
      this.locals = res;
    });
  }

  get() {
    this.getDefaults();
    this.getLocals();
    this.options = Object.assign(this.defaults, this.locals); // <-- This is where the code fails: this.defaults and this.locals are empty.
    return this;
  }
}

const opts = new Options().get();
console.log(opts); // Object { defaults: {}, locals: {}, options: {} } background.js:31:1
console.log(Object.keys(opts)); // Array(3) [ "defaults", "locals", "options" ] background.js:32:1
console.log(opts.defaults); // Object {  } background.js:33:1

const options = Object.assign(opts.defaults, opts.locals);
console.log(options); // Object {  } background.js:36:1

我已经指出了错误首先触发的那一行，现在我的头撞在同一堵墙上 2 天多了，我相信它与 Firefox 的 browser.storage 返回的 Promise 的异步字符有关。* .get()，或与变量作用域相关。

我试过:

1. 在 get* 函数中声明一个局部变量(让那个=这个；)
2. 在 get* 函数中使用 async/await
3. 将 get* 函数的结果绑定(bind)到 this 或 this.defaults
4. 在创建此类之前，我从嵌套的 Promises 开始，但后来我也未能成功创建(全局)“选项”变量。

谢谢大家的指点——我已经厌倦了复习/重写这 36 个位置...

Answer 1

您无需等待通过调用 this.getDefaults(); 和 this.getLocals(); 创建的 promise，所以在您执行 this.options = Object.assign( ... 数据还没有准备好。

如果您在函数中创建一个 Promise，那么您需要从它返回，以便调用者可以等待该 Promise，以解决。

getDefaults() {
  return browser.storage.managed.get().then(res => {
    this.defaults = res;
  });
}

getLocals() {
  return browser.storage.local.get().then(res => {
    this.locals = res;
  });
}

get() {
    return Promise.all([
      this.getDefaults(),
      this.getLocals()
    ])
    .then(() => {
       this.options = Object.assign(this.defaults, this.locals);
       return this
    })
})

而且你肯定还需要在 get() 上使用 then 或 await 来等待 get即将完成。