淘汰js最佳实践ajax错误处理

Question

当ajax json响应变坏时,你使用了Knockout js的最佳实践.

如何创建映射以显示用户发生的错误？如何更改Knockout js中表单的绑定以容纳错误？

我发送了一个响应对象{response:"success",data:{}},这意味着有3个级别的错误:

1. 模型错误("失败"的json对象响应,包含哪些字段错误的模型数据)
2. 服务器错误(服务器无响应)
3. 服务器响应错误代码

还没有想出一个干净的viewmodel显示错误信息的方式,这就是我要问的原因.

Answer 1

我在KO中提出错误处理的方法是创建一个基类:

errorHandlingViewModel = function () {
    var self = this;
    self.ErrorText = ko.observable();
    self.errorHandler = function (jqXHR, textStatus, errorThrown) {
        self.ErrorText('An error has occured, please refresh the page and try again in a little while. (' + textStatus + ':' + errorThrown + ')');
    };
    self.validationErrorHandler = function (err) {
        //todo
        alert('validation error ' + err);
    }
    self.successHandler = function (data, onSuccess) {
        if (data.result == "success") {
            if (onSuccess) {
                onSuccess(data.data);
            }
        }
        else {
            if (data.data && data.data.Tag) {
                if (data.data.Tag == "ValidationError") {
                    validationErrorHandler(data.data.Tag);
                }
            }
            errorHandler(null, data.result, data.data);
        }
    };
};

这有一个可观察的ErrorText字段.

我需要此错误处理的所有ViewModel都可以使用原型继承:

viewModel.prototype = new errorHandlingViewModel();
var mainViewModel = new viewModel();
ko.applyBindings(mainViewModel, $("#locationTOApplyBindingTo")[0]);

在此视图模型中,ajax调用如下所示:

$.ajax({
    type: 'POST',
    url: myURL,
    data: myData,
    success: function (data) {self.successHandler(data,success);},
    error: self.errorHandler
}); //end ajax

UI是一个简单的数据绑定:

<div class="error" data-bind="visible:ErrorText">
    <div class="innerMSGContainer">
        <div class="innerMSG" data-bind="text:ErrorText"></div>
    </div>
</div>

Javascript Try-Catch仍然缺少此模型,因为我不确定该位置

Answer 2

就个人而言,我只会在成功时更新淘汰赛模型.然后,这使模型处于与错误之前相同的状态.

如果出现错误,您可以执行任何想要告诉用户出现错误的操作.我会使用humane.js向用户显示由于某种原因更新或创建失败的消息.在您的三种情况下,模型错误,没有响应或服务器错误,您可以检查错误功能中的帖子的状态,并选择一个不同的消息显示给用户

然后他们可以自由地再次做同样的事情,或者纠正他们的错误并再试一次.

$.post("somewhere")
.success(function() {
    // update knockout models here
})
.error(function() {
    // show error message to user
})
.complete(function() {
    // reset any temporary variables
});