нокаут JS лучшие практики обработки ошибок AJAX - PullRequest
Новая
       29

нокаут JS лучшие практики обработки ошибок AJAX

12 голосов
/ 15 февраля 2012

Какие лучшие практики для Knockout js вы использовали, когда ответы ajax json возвращаются плохо.

Как создать сопоставления для отображения ошибки, произошедшей с пользователем? Как изменить привязку формы в Knockout js для учета ошибок?

Я отправляю обратно объект ответа {response: "success", data: {}}, что означает, что существует 3 уровня ошибки:

  1. Ошибка модели (реакция объекта json на "сбой" с данными модели о том, какие поля были неправильными)
  2. Ошибка сервера (нет ответа от сервера)
  3. Сервер отвечает кодом ошибки

Не нашел чистого способа отображения сообщения об ошибке, вот почему я спрашиваю.

Ответы [ 2 ]

10 голосов
/ 22 февраля 2012

Способ обработки ошибок в 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

Пользовательский интерфейс представляет собой простую привязку данных: 

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

Javascript Try-Catch все еще отсутствует в этой модели, так как я не уверен в месте размещения

7 голосов
/ 15 февраля 2012

Лично я бы обновлял только нокаут-модели после успеха. После этого модели остаются в том же состоянии, что и до ошибки.

В случае ошибки вы можете сделать все, что захотите, чтобы сообщить пользователю, что произошла ошибка. Я бы использовал humane.js , чтобы показать пользователю сообщение о том, что обновление или создание не удалось по какой-то причине. В трех случаях ошибки модели, отсутствия ответа или ошибки сервера вы можете проверить состояние сообщения в функции ошибки и выбрать другое сообщение для отображения пользователю

Затем у них появляется свобода сделать то же самое снова или исправить свою ошибку и повторить попытку. 

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