Question

我正在为基于Web的服务开发一个客户端库，我在设置对象变量和稍后检索它时遇到了一些问题。

这是图书馆的开头

var QuickBase = function(username, password, apptoken, realm) {

    this.username = username;
    this.password = password;
    this.apptoken = (typeof apptoken === "undefined") ? '' : apptoken;
    this.realm = (typeof realm === "undefined") ? 'www' : realm;
    this.ticket = '';
    this.dbid = '';
    this.payload = '<qdbapi>';

    this.init = function() {
        var self = this;

        this.authenticate(this.username, this.password, null, null, function(data) {
            var errcode = $(data).find('errcode').text();
            if(errcode > 0)
                throw new Error($(data).find('errtext').text());

            self.ticket = $(data).find('ticket').text();
        });
    }

    this.setBaseUrl = function() {
        var endpoint = this.dbid == '' ? 'main' : this.dbid;
        this.baseUrl = 'https://' + this.realm + '.quickbase.com/db/' + endpoint;
    }

    this.transmit = function(method, callback) {
        this.setBaseUrl();

        if(this.apptoken)
            this.payload += '<apptoken>' + this.apptoken + '</apptoken>';

        if(this.ticket)
            this.payload += '<ticket>' + this.ticket + '</ticket>';

        this.payload += '</qdbapi>';

        console.log(this.payload);

        $.ajax({
            url: this.baseUrl,
            type: 'POST',
            data: this.payload,
            dataType: 'xml',
            headers: {
                'Content-Type': 'application/xml',
                'QUICKBASE-ACTION': method
            },
            success: callback
        });

        this.payload = '<qdbapi>';
    }

    this.addSettingsToPayload = function(settings) {
        for(var key in settings) {
            this.payload += '<' + key + '>' + settings[key] + '</' + key + '>';
        }
    }

    this.authenticate = function(username, password, hours, udata, callback) {
        this.payload += '<username>' + username + '</username>';
        this.payload += '<password>' + password + '</password>';

        this.payload += (typeof hours === "undefined") ? '' : '<hours>' + hours + '</hours>';
        this.payload += (typeof udata === "undefined") ? '' : '<udata>' + udata + '</udata>';

        this.transmit('API_Authenticate', callback);
    }

这是用例：

var username ='foo'，密码='酒吧'， token ='footoken'， realm ='foorealm';

window.qb = new QuickBase(username, password, token, realm);
$.when(qb.init()).then(function(){ 
  console.log(qb); // shows the object with ticket set
  console.log(qb.ticket); // empty
  qb.doQuery(); // breaks because internal this.ticket is empty
});

所以我的问题是为什么qb.ticket没有被设置并且在将来的函数调用中不可用？

另外，有没有办法在.when中包装.init（）？

基本上，init设置了所有未来API方法所需的票证。如果我只调用qb.init（）然后调用qb.doQuery（），则无法保证init（）将完成 - 但是如果我使用.when，那么这意味着将来所有的方法调用都不需要在.then回调？这看起来很难看。

Answer 1

$.when需要一个promise对象。如果它没有得到它将立即执行回调。您必须返回来自$.ajax电话的承诺，或创建您自己的承诺。

但是，因为你只使用一个承诺，你甚至不需要什么时候。你可以这样做：

qb.init().done(qb.doQuery.bind(qb));

示例：

var QuickBase = function(username, password, apptoken, realm) {
    // ...

    this.init = function() {
        var self = this;

        return this.authenticate(this.username, this.password, null, null).done(function(data) {
            var errcode = $(data).find('errcode').text();
            if(errcode > 0)
                throw new Error($(data).find('errtext').text());

            self.ticket = $(data).find('ticket').text();
        });
    }

    this.transmit = function(method) {
        // ...

        var promise = $.ajax({
            url: this.baseUrl,
            type: 'POST',
            data: this.payload,
            dataType: 'xml',
            headers: {
                'Content-Type': 'application/xml',
                'QUICKBASE-ACTION': method
            }
        });

        this.payload = '<qdbapi>';
        return promise;
    }

    this.authenticate = function(username, password, hours, udata) {
        // ..
        return this.transmit('API_Authenticate');
    }
}

另外，您可以让.init接受回调：

this.init = function(callback) {
    var self = this;

    this.authenticate(this.username, this.password, null, null, function(data) {
        var errcode = $(data).find('errcode').text();
        if(errcode > 0)
            throw new Error($(data).find('errtext').text());

        self.ticket = $(data).find('ticket').text();
        callback();
    });
};

然后：

qb.init(function(){ 
  qb.doQuery();
});

Answer 2

最简单的方法可能是从init()返回一个承诺，如下所示：

this.init = function() {
    var self = this;
    var dfrd = $.Deferred();
    this.authenticate(this.username, this.password, null, null, function(data) {
        var errcode = $(data).find('errcode').text();
        if(errcode > 0)
            throw new Error($(data).find('errtext').text());
        self.ticket = $(data).find('ticket').text();
        dfrd.resolve();
    });
    return dfrd.promise();
}

然后：

window.qb = new QuickBase(username, password, token, realm);
qb.init().then(function() {
  console.log(qb);
  console.log(qb.ticket);
  qb.doQuery();
});

使用异步操作在JS中设置对象属性的问题

2 个答案: