用不同的方法等待 promise

Question

我目前正在为承诺而苦苦挣扎，我认为我的概念有点错误。 基本上我想做的是编写一个小模板处理程序。

它有一个 load() 方法，它加载一个模板并将其存储到一个属性中，并且它将是可链接的。 我想链接它的方法是attachTo() ，将我之前加载的模板附加到 DOM 元素。

由于模板是异步加载的，我尝试使用 Promise。 但似乎 promise 上的done()方法正在立即触发，并且在异步调用完成之前。

我这样称呼它：

tpl.load('stuff.html').attachTo($('.someElement'));

我希望它的行为是，每当我调用attachTo()它都会等待我之前调用的 load() 方法来完成它的异步操作，然后触发done方法中提供的回调。

这是处理程序的相关部分

var tpl = {
...
    template: null,
    promise: null,

    load: function(template) {
        this.promise = $.get(this.templateUrl + template, function(response){
            this.template = response;
            console.log(this.template);
            //Outputs the desired value
        });
        return this;
    },

    attachTo: function(el) {
        var self = this;
        $.when(this.promise).done(function(){
            //outputs null but should output the 
            //value that has been set in my async call
            console.log(self.template);
        });
    }

..
}

tpl.load('stuff.html').attachTo($('.someElement'));

Answer 1

结果证明这是一个范围界定问题。 deferreds 没有任何问题，但是我分配了值的实例的范围。

load: function(template) {
    this.promise = $.get(this.templateUrl + template, function(response){
        this.template = response;
        console.log(this.template);
        //Outputs the desired value
    });
    return this;
},

在这里，我为this.template分配了一个值。 但是我不在我的对象范围内，而是在$.get()方法的关闭范围内。 因此，其他方法无法从属性中提取值，因为它从未存储在那里。

我想出了：

load: function(template) {
    var self = this;
    this.promise = $.get(this.templateUrl + template, function(response){
        self.template = response;
    });
    return this;
},

我首先将对象实例实例分配给self变量并在闭包中引用它而不是使用this 。 为了更优雅地解决它，还可以使用$.proxy() 。

就这样。 这只是一个范围界定问题，而不是一个延期问题。

Answer 2

虽然您自己已经确定了问题，但建议的解决方案并不是一个好的解决方案。

你不应该使用在某个时候设置的全局变量，也不应该使用承诺只是为了传播更改，但承诺应该代表这些值。 这导致了更好的函数式编程风格。

在你的情况下：

var tpl = {
    …
    templatePromise: null,
    load: function(template) {
        this.templatePromise = $.get(this.templateUrl + template).then(function(response) {
            console.log(this.template);
            //Outputs the desired value
            return response;
        });
        return this;
    },
    attachTo: function(el) {
        $.when(this.templatePromise).done(function(template) {
            // get the template here:              ^^^^^^^^
            console.log(template);
        });
    }
    …
}