打字+ jQuery的阿贾克斯+本jQuery、阿贾克斯

2023-09-10 19:14:56 作者:受够i

我在移植一些JavaScript code到打字,我所遇到的一个问题。

我有一个Ajax调用它传递一个对象作为背景,这个对象包含了一些回调和它的成功或错误回调这表明那里的成功调用应该被重定向到被读出一些其他的信息:

 功能SomeAjaxService
{
    无功自我=这一点;

    self.CheckErrorType =功能(...){
        // 做一点事
    };

    VAR SuccessProxyCallback =功能(结果){
        //是否有结果的一些东西,比如送了一些事件
        this.successCallback(结果);
    };

    VAR FailureProxyCallback =功能(...){
        //是否有错误的一些东西,并触发一些事件
        VAR someErrorType = self.CheckErrorType(...);
        this.failureCallback(someErrorType);
    };

    self.SendRequest =功能(requestArgs){
        VAR ajaxSettings = {
            背景:requestArgs,
            //指定的东西负载
        };

        $阿贾克斯(ajaxSettings);
    };
}
 

现在,你可以看到失败的代理调用本地方法,以及一个使用这个上下文对象。所以你怎么能以打字稿处理这样的情况呢?

你能只设置自=这个在构造函数中,并继续为你过吗?

==编辑==

由于这里要求的是上面显示这个需要是两件事情,由于缺少自变量的问题,一类重presentation。

 类SomeAjaxService
{
    公共CheckErrorType(someArg1:任何,someArg2:任意){
        //是否有数据的某些东西
    };

    私人SuccessProxyCallback(结果:任意){
        //是否有结果的一些东西,比如送了一些事件
        this.successCallback(结果);

        //请问上述*本*使用点的情况下
        // Ajax调用或实际实例化类
    };

    私人FailureProxyCallback(...){
        //是否有错误的一些东西,并触发一些事件
        VAR someErrorType = this.CheckErrorType(...);

        //以上*本*调用可能是不正确的,如果环境已覆盖
        //这个范围,但是我不知道如果这是真的,我竟然需要
        // this.CheckErrorType调用本地方法?

        this.failureCallback(someErrorType);

        //如上所述,这里同样的问题,但*本*应该有希望
        //指向Ajax对象不​​是本地实例上的上下文对象。
    };

    公共sendRequest将(requestArgs:任何){
        VAR ajaxSettings:JqueryAjaxSettings = {
            背景:requestArgs,
            //指定的东西负载
        };

        $阿贾克斯(ajaxSettings);
    };
}
 

就像我上面说的主要问题是,在一个方法,我需要调用的实例方法之一,也是从Ajax调用上下文对象上调用方法。随着原材料的JavaScript我会自=这个,然后我可以避开被覆盖,这是需要保持在范围上的AJAX异步状态对象。

解决方案   

你能刚刚成立的自我=这在构造函数中,并继续为你过吗?

说到抽象,这样在构造函数中通常会解决不了任何问题(除非你捕捉到它后来在该方法 - 见下文)。对象本身,而不是捕捉当地人的打字稿类存储类实例的数据。因为将被存储在的对象,你最终不会有你做了什么已经没有之前。

jQuery打字机文字输入特效

下面是做到这一点的一种方法:

 类SomeAjaxService
{
    私人FailureProxyCallback(背景下,ARG){
        //现在'这个'是类实例,语境是requestArgs
    }

    公共sendRequest将(requestArgs){
        无功自我=这一点; //注:以下封抓获本地使用
        VAR ajaxSettings = {
            背景:requestArgs,
            //不要用一个箭头的功能在这里,即使是很有诱惑力!
            错误:函数(ARG){self.FailureProxyCallback(这一点,ARG)}
        };

        $阿贾克斯(ajaxSettings);
    };
}
 

I am porting some javascript code over to typescript and I have come across a problem.

I have an ajax call which passes an object as context, this object contains some callbacks and some other information which are read out by the success or error callbacks which indicate where the success invocation should be redirected to:

function SomeAjaxService
{
    var self = this;

    self.CheckErrorType = function(...) {
        // Do something
    };

    var SuccessProxyCallback = function(results) {
        // Do some stuff with results, like send off some events
        this.successCallback(results);
    };

    var FailureProxyCallback = function(...) {
        // Do some stuff with errors, and fire some events
        var someErrorType = self.CheckErrorType(...);
        this.failureCallback(someErrorType);        
    };

    self.SendRequest = function(requestArgs) {
        var ajaxSettings = {
            context: requestArgs,
            // Assign a load of stuff
        };

        $.ajax(ajaxSettings);
    };
}

Now as you can see the failure proxy calls a local method as well as a using the "this" context object. So how can you handle this sort of scenario with typescript?

Can you just set self = this in the constructor and continue as you were before?

== EDIT ==

As requested here is a class representation of above showing the issue of this needing to be 2 things due to the missing self variable.

class SomeAjaxService
{
    public CheckErrorType(someArg1: any, someArg2: any) {
        // Do some stuff with data
    };

    private SuccessProxyCallback(results: any) {
        // Do some stuff with results, like send off some events
        this.successCallback(results); 

        // Does the above *THIS* usage point to the context of the 
        // Ajax call or the actual instantiated class
    };

    private FailureProxyCallback(...) {
        // Do some stuff with errors, and fire some events
        var someErrorType = this.CheckErrorType(...);

        // The above *THIS* call cannot be correct if the context has overwritten
        // the scope of this, however I dont know if this is true, do I even need
        // this.CheckErrorType to invoke a local method?

        this.failureCallback(someErrorType);        

        // As mentioned above same issue here but the *THIS* should hopefully
        // point to the context object on the ajax object not the local instance.
    };

    public SendRequest(requestArgs: any) {
        var ajaxSettings : JqueryAjaxSettings = {
            context: requestArgs,
            // Assign a load of stuff
        };

        $.ajax(ajaxSettings);
    };
}

Like I say above the main issue is that in a method I need to invoke one of the instances methods as well as invoke a method on the context object from the ajax call. With raw javascript I would have self = this and then I can get around this being overridden, which is required to keep the ajax async state object in scope.

解决方案

Can you just set self = this in the constructor and continue as you were before?

Speaking abstractly, doing this in the constructor will usually solve nothing (unless you capture it later on in that method -- see below). TypeScript classes store class instance data on the object itself rather than capturing locals. Because self will be stored on the this object, you don't end up having anything you didn't already have before.

Here's one way to do it:

class SomeAjaxService
{
    private FailureProxyCallback(context, arg) {
        // now 'this' is the class instance and 'context' is requestArgs 
    }

    public SendRequest(requestArgs) {
        var self = this; // Note: captured local used in closure below
        var ajaxSettings = {
            context: requestArgs,
            // Do not use an arrow function here, even though it's tempting!
            error: function(arg) { self.FailureProxyCallback(this, arg) }
        };

        $.ajax(ajaxSettings);
    };
}