Question

我可以按如下方式进行javascript ajax调用：

$.getJSON( "http://localhost:62178/document?filename=c:/test/dave.docx", function( data ) {
    console.log("read = " + data);
}).done(function(e) {
    console.log( "second success" );
})
    .fail(function(e, f, g) {
        console.log( "error" );
    })
    .always(function(e) {
        console.log( "complete" );
    });

如何声明和编写具有相同功能的typescript类？换句话说，如果我的类有一个getJSON（）方法，我怎么写它，所以我有main函数和可选的命名函数？

谢谢 - 戴夫

Answer 1

在评论中被要求提供示例后，我决定将其作为单独的答案发布，以便更容易区分它们。

当然还有很多需要改进的地方。例如，可以做的一件事是即使在延迟解决之后允许将处理程序附加到promise（它们将立即触发）。这样，can也可以处理同步请求。

当然，您可以添加其他回调等。再次，只是一个小例子！：）

enum Status {
    SUCCESSFUL, FAILED
}

interface Callback { (): void; }

class Deferred {
    public promise : Promise = new Promise();

    public resolve( status : Status = Status.SUCCESSFUL ) {
        if( status === Status.SUCCESSFUL ) {
            this.executeCallback( this.promise.cbSuccess );
        } else {
            this.executeCallback( this.promise.cbFail );
        }
    }

    private executeCallback( callback : Callback ) {
        if( callback ) {
            callback.call( null );
        }
    }
}

class Promise {
    public cbSuccess : Callback;
    public cbFail : Callback;

    public success( callback : Callback ) : Promise {
        this.cbSuccess = callback;
        return this;
    }

    public fail( callback : Callback ) : Promise {
        this.cbFail = callback;
        return this;
    }
}

// =======
// Example
// =======

function getJson( url : string ) : Promise {
    var deferred = new Deferred();

    // simulate some asynchronous operation
    setTimeout( function someAsynchRequest() {
        var result = Math.random() < 0.5
            ? Status.SUCCESSFUL : Status.FAILED;

        console.log( "Asynchronous operation finished [result: "
            + Status[result] + "]!" );

        // resolve our deferred with the result we got
        deferred.resolve( result );
    }, 3000 );

    // return only the promise because the caller actually
    // doesn't need to know about the deferred itself
    // (e.g. the caller shouldn't be able to resolve it)
    return deferred.promise;
}

getJson( "no one cares" )
    .success( function () {
        console.log( "Callback came back with success!" );
    } ).fail( function () {
        console.log( "Callback came back with failure :(" );
    } );

Answer 2

tl; dr了解promises and deferreds

从Typescript透视图中了解这一点的好方法可能是DefinitelyTyped查看they're typing jQuery的方式。

可以找到getJSON的定义here，例如

getJSON(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;

如您所见，它返回一个新类型JQueryXHR，这是一个可以找到的界面here：

interface JQueryXHR extends XMLHttpRequest, JQueryPromise<any> {
    overrideMimeType(mimeType: string): any;
    abort(statusText?: string): void;
}

反过来，这会引用JQueryPromise，可以找到here，现在包含所有这些回调：

interface JQueryPromise<T> {
    always(alwaysCallbacks1?: JQueryPromiseCallback<T>, ...alwaysCallbacks2: JQueryPromiseCallback<T>[]): JQueryDeferred<T>;
    done(doneCallbacks1?: JQueryPromiseCallback<T>, ...doneCallbacks2: JQueryPromiseCallback<T>[]): JQueryDeferred<T>;
    fail(failCallbacks1?: JQueryPromiseCallback<T>, ...failCallbacks2: JQueryPromiseCallback<T>[]): JQueryDeferred<T>;
    // … and so on …
}

那将是Typescript部分。如果您对实际实现感兴趣，可以直接查看jQuery源代码。基本思想是该方法只返回一个可以添加处理程序的promise。然后，deferred将解析并调用附加的处理程序。

~~一个相当快速的例子如下：~~（我已经删除了这个例子，因为一个错过这一点的例子并不值得，如果有的话，可能提出错误的想法）。

如何向typescript函数添加可选回调？

2 个答案: