在 qooxdoo 应用程序中使用 Promise

Question

在一个 qooxdoo 类中，我有一组需要链接（序列化）的异步方法：

main: function() {
    async1();
},

async1: function() {
    var json = new qx.data.store.Json("http://...");
    json.addListener("loaded", function(event) {
        ...
        async2();
    });
},

async2: function() {
    // similar to async1
}

随着步骤数的增加，链条变得难以追踪，代码变得不可读。我们可以做的是使用Promises重写我们的代码：

main: function() {
    new Promise(this.async1)
    .then(function() {
        return new Promise(this.async2);
    }).then(function() {
        return new Promise(this.async3);
    }).catch(...);
},

async1: function(resolve, reject) {
    var json = new qx.data.store.Json("http://...");
    json.addListener("loaded", function(event) {
        ...
        resolve();
    });
},

async2: function(resolve, reject) {
    // similar to async1
}

这很有效，但只有在我们添加一些真正的逻辑之前。请记住，这是一个 qooxdoo 类，其中有很多东西封装在 this 中。但突然发现 then() 和 catch() 中使用的 async* 方法和匿名函数都将它们的 this 上下文绑定到了全局对象 window。为了能够使用实际的this，我们可以执行重新绑定：

main: function() {
    new Promise(this.async1.bind(this))
    .then(function() {
        this.doSomeStuff();
        return new Promise(this.async2.bind(this));
    }.bind(this)).then(function() {
        return new Promise(this.async3.bind(this));
    }.bind(this)).then(function() {
        this.doSomeFinalStuff();
    }.bind(this)).catch(function() {
        this.doStuffOnError();
    }.bind(this));
},

async1: function(resolve, reject) {
    this.doOtherStuff();
    var json = new qx.data.store.Json("http://...");
    json.addListener("loaded", function(event) {
        ...
        resolve();
    });
}

这终于可行了，但是，糟糕的是代码！有没有办法摆脱那些手动绑定？为什么当我们引用 this.async1 这个实例方法时，this 没有被隐式绑定？

Answer 1

查看this answer out

基本上，看起来您从根本上没有做错任何事情。这就是上下文应该如何工作的方式。您真正需要的是针对您的特定用例的一些语法糖。您可以自己制作这些糖扩展，也可以使用库来完成一些繁重的工作。

您还可以像 Danbopes 建议的那样重构您的代码并组织它，这样您就可以减少内联绑定。这可以让您更好地阅读您的流程。

Answer 2

如果你在顶部添加var self = this;，在所有函数中你可以通过调用self来引用对象本身：

main: function() {
    var self = this;
    new Promise(self.async1)
    .then(function() {
        return new Promise(self.async2);
    }).then(function() {
        return new Promise(self.async3);
    }).catch(...);
},