Type方法的Typescript序列

Question

I got a typescript class with an attribute that contain some connection data that are the result of an ajax call, here's a snippet:

class User {
    // ... other stuff (constructor, attributes, methods)
    static data:{id:number; token:string} = {id: 0, token: ""};
    connect() {
        // Ajax Call
        .done(function(e){
            User.data.id = e.id;
            User.data.token = e.token;
        })
    }
    request() {
        if(User.data.id == 0)
            setTimeout(() => { 
                this.request();
            }, 500);
        else return  '?id=' + User.data.id + '&token=' + User.data.token;
    }
}

I tried to use connect() and subsequently request() but sometimes the request() function starts before ajax's answer. Now I'm trying to write the request() function with some waiting time and a sort of recursion. Unfortunately it doesn't work.. My goal is to call the request() function and obtain the string only when "id" and "token" are ready (not 0 and empty string). Any suggestion would be appreciated!

PS: I can't put the request() function inside the ajax callback: the two functions should be separated

Answer 1

Once you are in promise land you need to stay there (or use a callback):

class User {
    // ... other stuff (constructor, attributes, methods)
    static data: { id: number; token: string } = { id: 0, token: "" };

    private connectedPromise;
    connect() {
        // Ajax Call
        this.connectedPromise = something.done( function ( e ) {
            User.data.id = e.id;
            User.data.token = e.token;
        })
    }
    request() {
        this.connectedPromise.then( () => {
            if ( User.data.id == 0 )
                setTimeout( () => {
                    this.request();
                }, 500 );
            else return '?id=' + User.data.id + '&token=' + User.data.token;
        })
    }
}

Store the result of connect in a var on only execute request if connect has resolved.

PS the request function is bad (I haven't cleaned it up but removed the return) in that it is maybe async ie it either returns a value or does some async work. Better to be consistent and always be async.

Answer 2

The calling code should be combining the promises with then . connect() and request() should just return their promises. eg they "promise to return done when connected" and "promise to return the requested data". In the case of request , it does not need a deferred object or promise as it simply returns a value immediately.

JSFiddle example: http://jsfiddle.net/TrueBlueAussie/qcjrLv4k/3/

// Return a fake connection after 5 seconds
var connect = function (){
    var def = $.Deferred();
    setTimeout(function(){
        def.resolve();
    }, 5000);
    return def.promise();
}

var request = function(){
    return "?data=d";
}

and use like this:

connect().then(request).done(function(data){
    alert(data);
});

So in your case, just return the ajax call result as a promise from connect() :

   connect() {
        return $.ajax({[snipped]})
        .done(function(e){
            User.data.id = e.id;
            User.data.token = e.token;
        });
    }

and request simply returns the string:

request() {
    return '?id=' + User.data.id + '&token=' + User.data.token;
}

Another way to do it is to save the connect promise:

var promise = connect();

and use it whenever you want to get the request data:

promise.then(request).done(function(data){
    alert(data);
});

A better way , if your request is dependent on a "connection", is to pass the connect promise to the request method as a required parameter:

request(connectionPromise){
    return connectionPromise.then(function(){
         return '?id=' + User.data.id + '&token=' + User.data.token;
    });
};

and call with:

request(connect()).done(function(data){
   alert(data);
});

Example using this approach here: http://jsfiddle.net/TrueBlueAussie/qcjrLv4k/4/

Final example (based on commented desire to reuse connection). Combine the previous answers like this:

1) Save the connection as a property of the object.

// Start the connection process and save the promise for re-use
var connectionPromise = connect();

2) Use the connection as a parameter to the requests (so they do not need to have knowledge of the external variable):

// Make a request, passing the connection promise
request(connectionPromise).done(function(data){
   alert(data);
});

3) The request method does not change from the previous example:

request(connectionPromise){
    return connectionPromise.then(function(){
         return '?id=' + User.data.id + '&token=' + User.data.token;
    });
};