Javascript 实现Ajax延迟/承诺模式

我有一个testcase，每次发生表单字段更改事件时，我都要向服务器发送一个请求。在我提交表单并检查是否有空值之前，下面的实现可以正常工作。这是唯一执行的前端验证，其余的通过ajax完成。如果字段为空，我将触发一个更改事件，以便可以在服务器端执行验证

在下面的示例中，我必须将async=>false设置为每个触发器都能按预期工作。我意识到这并不理想，使用延迟/承诺模式有更好的解决方法

我已经使用了一些模式。promise and。然后，我认为我需要使用。when方法，但我不确定如何将其应用到我的部分工作示例中

我也有点不确定发送到服务器的请求量。每次事件发生时发送这么多（即）是否可行

请忽略块注释，我只是将它们用于代码分离

---

我不清楚为什么您现在需要使用async:false。您正在使用承诺，那么这其中的哪一部分要求请求是同步的？触发器“更改”要求请求是同步的。这并不理想，因此需要一个变通方法。我不知道为什么触发器会要求请求是同步的。事件的触发应该与它们的实际行为断开。或者这是因为您连续有三个触发器，并且请求相互践踏？@JLRishe正是这样。这三个触发器将被连续调用。我认为您在尝试等待事件的异步结果时会遇到一些问题，因为我提到的分离。您是否可以让您的测试用例直接调用handleChangeEvent并使用.then等待其结果？我认为这应该允许你做你需要做的事情。

(function($){
var Registration= {};

/**
 * 
 * @type type
**/
Registration.fields = {};    
/**
 * 
 * @type type
**/
Registration.options = {
    cache       : false,
    type        : 'POST',
    dataType    : 'json',
    url         : SITE_URL + '/members/validateFieldOnChange',
    context     : undefined,
    data        : undefined,
    async       : false    // TODO
};
/**
 * 
 * @returns {undefined}
**/
Registration.init = function(){

    //caching
    this.Form = $('form#form-register');

    this.fields = {
        username    : this.Form.find('#username'),
        email       : this.Form.find('#email'),
        password    : this.Form.find('#password'),
    };   

    // register event handlers
    this.Form.on('change', 'input', $.proxy(this.handleEvents, this));
    this.Form.on('submit', $.proxy(this.handleEvents, this));
};
/**
 * 
 * @param {type} event
 * @returns {undefined}
**/
Registration.handleEvents = function(event){   
    var type, target 

    event.preventDefault();

    type   = event.type;
    target = event.target;

    if(type == 'change'){
        return this.handleChangeEvent(event.target);
    }

    return this.handleSubmitEvent();      
};

/**
 * 
 * @param {type} target
 * @returns {undefined}
**/
Registration.handleChangeEvent = function(target){

    this.options.context = target;

    this.options.data = { field : target.name, value : target.value}

    return this.validate();
};

/**
 * 
 * @returns {undefined}
**/
Registration.handleSubmitEvent = function(){

    // Ugly testcase if values are empty
    // TODO
    if($('#username').val() == ''){
        $('#username').trigger('change');
    }

    if($('#email').val() == ''){
        $('#email').trigger('change');
    }

    if($('#password').val() == ''){
        $('#password').trigger('change');
    }

};
/**
 * 
 * @returns {_L2.Registration@call;doAjax@call;then}
**/
Registration.validate = function(){
    return this.doAjax().then(
        $.proxy(this.handleResponse, this),
        $.proxy(this.handleError, this)
    );
};

/**
 * 
 * @param {type} response
 * @returns {undefined}
**/
Registration.handleResponse = function(response){

    var field = $(this.options.context);

    if(response.msg == 'success')
    {
        field.addClass('valid');
    }
    else
    {
        field.val('');
        field.attr('placeholder', response.responseError);
        field.addClass('invalid');
    }

    return;
};
/**
 * 
 * @param {type} error
 * @returns {undefined}
**/
Registration.handleError = function(error){
    switch(error.code)
    {
        case 404:
            return console.error('Not found');
        break;
        case 401:
            return console.error('un-authorized access!');
        break;
        case 500:
            return console.error('system error!');
        break;
    }
};

/**
 * 
 * @returns {unresolved}
**/
Registration.doAjax = function(){
    return $.ajax(this.options).promise();
}

Registration.init();
})(jQuery);