ajax ES6 函数内的成功回调函数

Question

我有一个简单的表格。我提交它。我有一个名为 isSuccess 的函数，它在成功发生时被调用。在 isSuccess 中，我调用了一个函数 testerit()。它永远不会被解雇并抱怨它是未定义的。这是为什么

class FormSign {
    constructor(cfg) {
        this.init();
    }
    init() {
        // listen for form submit
        $('.emailbtn').on('click', (event) = > {
            event.preventDefault();
            this.validateForm();
        });
    }
    submitForm() {
        //..............
        $.ajax({
            'type': 'POST',
            'url': '/api/url',
            'data': forminfo,
            'success': this.isSuccess,
            'error': this.isError
        })
        event.preventDefault();
    }
    isSuccess() {
        //..............
        testerit();
    }
    signupError() {
        //...............
    }
    testerit() {
        console.log('just testing');
    }
}

Answer 1

通过将未绑定函数传递给 jQuery 的 ajax 成功方法，您丢失了对实例的引用，因此无法调用 this.testerit。要补救，您应该将实例绑定到函数，或者将实例提供给 jQuery 以用作上下文。

$.ajax({
    'type': 'POST',
    context: this,
    'url': '/api/url',
    'data': forminfo,
    'success': this.isSuccess,
    'error': this.isError
})

或

$.ajax({
    'type': 'POST',
    'url': '/api/url',
    'data': forminfo,
    'success': data => this.isSuccess(data),
    'error': (jqXHR, status, error) => this.isError(jqXHR, status, error)
})

或

$.ajax({
    'type': 'POST',
    'url': '/api/url',
    'data': forminfo,
    'success': this.isSuccess.bind(this),
    'error': this.isError.bind(this)
})

然后在实例上正确调用 testerit。

this.testerit();

https://jsfiddle.net/npc0nzjt/

ajax ES6 函数内的成功回调函数

ajax success call back function within function ES6

ajax

es6-promise