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

What best practices for Knockout js have you used when ajax json responses come back bad.

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

How do you create your mappings to display an error has occured to the user? How do you change the binding of a form in Knockout js to accommodate errors?

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

I send back a response object of {response:"success",data:{}}, which kind of means that there are 3 levels of error:

我发送了一个响应对象{response：“success”，data：{}}，这意味着有3个级别的错误：

The Model error (json object response of "failure", with model data of what fields were wrong)
模型错误（“失败”的json对象响应，哪些字段的模型数据错误）
The Server error (no response from server)
服务器错误（服务器无响应）
Server responds with error code
服务器响应错误代码

Have not figured out a clean viewmodel way of displaying an error message which Is why I'm asking.

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

2 个解决方案

#1

The way I've come up with error handling in KO has been to create a base class:

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

This has an observable ErrorText field.

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

All my ViewModels that need this error handling can use prototypal inheritance:

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

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

In this view models ajax calls look like:

在此视图模型中，ajax调用如下所示：

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

The UI is a simple data-bind:

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

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

Javascript Try-Catch is still missing from this model as I am unsure to the placement

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

#2

Personally I would only update the knockout models upon success. This then leaves the models in the same state as prior to the error.

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

In the case of an error, you could do anything you want to tell the user there has been an error. I would use humane.js to show a message to the user that the update or creation has failed for some reason. In your three cases for model error, no response or server error, you could check the state of the post in the error function and choose a different message to display to the user

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

They then have the freedom to do the same thing again, or correct their mistake and try again.

然后他们可以*地再次做同样的事情，或者纠正他们的错误并再试一次。

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

#1