вызов функции в AJAX

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);
        })
    } 
}

Я хочу вызвать функцию моего сервиса (named: changeValue ()), если мой ajax-запрос успешен.

Но у меня есть это сообщение об ошибке: core.js:12632 ERROR TypeError: Cannot read property 'changeValue' of undefined

Знаете ли вы, если это можно решить?

Answer 1

Используйте функцию стрелки для доступа к 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] для доступа к дочернему методу.Любой метод работает одинаково.

Также посмотрите документы MDN на this.Это запутанная тема для многих.

Answer 2

Я подозреваю, что эта привязка работает неправильно в обратных вызовах, поэтому предпочитаю использовать функцию стрелки из-за привязки оператора 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);
    })
}