Question

是否可以在ajax请求的成功回调中调用函数？

例如，我有类似的东西：

constructor(private http: HttpClient,private serviceComposition: CompositionService) { }

[...]

save() {

    var isValid = this.isValidCompo();

    if (true) {
        var toSend = JSON.stringify(this.setupComposition);
        $.ajax({
            url: "/api/setup/composition/addSetupComposition",
            type: 'POST',
            dataType: "json",
            data: 'setupComposition=' + toSend,
            success:function(response){
                //console.log("Success Save Composition");

            },
            error: function(XMLHttpRequest,textStatus,errorThrown){
                console.log("Error Save Compo");
            }
        }).done(function(data){
            this.serviceComposition.changeValue(isValid);
        })
    } 
}

如果我的ajax请求成功，我想调用服务的函数（名为：changeValue（））。

但是我收到此错误消息：core.js:12632 ERROR TypeError: Cannot read property 'changeValue' of undefined

您知道是否有可能解决该问题？

Answer 1

我怀疑此绑定在回叫中出了错，由于使用“ this”运算符绑定，因此更喜欢使用箭头功能。

 if (true) {
    var toSend = JSON.stringify(this.setupComposition);
    $.ajax({
        url: "/api/setup/composition/addSetupComposition",
        type: 'POST',
        dataType: "json",
        data: 'setupComposition=' + toSend,
        success:function(response){
            //console.log("Success Save Composition");

        },
        error: function(XMLHttpRequest,textStatus,errorThrown){
            console.log("Error Save Compo");
        }
    }).done((data) => {
        this.serviceComposition.changeValue(isValid);
    })
}

如果不是，您可以将此引用存储在变量中并调用

 var self = this;
 if (true) {
    var toSend = JSON.stringify(this.setupComposition);
    $.ajax({
        url: "/api/setup/composition/addSetupComposition",
        type: 'POST',
        dataType: "json",
        data: 'setupComposition=' + toSend,
        success:function(response){
            //console.log("Success Save Composition");

        },
        error: function(XMLHttpRequest,textStatus,errorThrown){
            console.log("Error Save Compo");
        }
    }).done(function(data){
        self.serviceComposition.changeValue(isValid);
    })
}

Answer 2

使用arrow function访问您的父范围的this。在您的示例中，this指的是jQuery XHR对象。

所以：

// [parent scope]

$.ajax({
  ...
}).done((data) => {
  // [child scope]
  // `this` now refers to [parent scope], so the following is valid
  this.serviceComposition.changeValue(isValid);
});

箭头功能（ES6）之前的另一种常见做法是在const self = this;区域中分配一个[parent scope]变量，以便在子方法中进行访问。两种方法都相同。

也check out the MDN docs on this。对于许多人来说，这是一个令人困惑的话题。

ajax成功回调中的call函数

2 个答案: