Разделение проблем и обратных вызовов JQuery AJAX - PullRequest
Новая
       21

Разделение проблем и обратных вызовов JQuery AJAX

0 голосов
/ 28 ноября 2018

Я работаю над веб-приложением для управления должниками и реорганизую код и пытаюсь придерживаться принципа разделения интересов.Но асинхронная природа AJAX вызывает у меня головную боль.

В диалоговом окне jQuery пользователь может установить флаг для должника, который затем сохраняется в базе данных.Если это успешно, диалоговое окно показывает уведомление.До сих пор я обрабатывал все внутри функции обратного вызова JQuery Ajax success: проверка ввода, выполнение запроса ajax и обновление содержимого диалога.

Конечно, это приводит к коду спагетти.

Таким образом, ясоздал класс AjaxHandler со статическим методом для установки флага, который вызывается диалогом.Я думал, что диалог может обновляться в соответствии с возвращаемым значением AjaxHandler, но я не имел в виду асинхронность.

Следующий вопрос был полезен при рассмотрении возвращаемых значений.

Как вернуть ответ от асинхронного вызова?

Но как я могу обновить диалог, не нарушая принцип SoC?

EDIT 

$("#button").on("click", function() {
    var returnValue = AjaxHandler.setFlag();
    if(returnValue) { $("#div").html("Flag set"); }
    else { $('#div").html("Error setting flag");
});

class AjaxHandler { 
    static setFlag(){
        $.ajax({
            type: "POST",
            url: "ajax/set_flag.php",
            success: function(returndata){
            return returndata; //I know this does not work because of                         
            //ASYNC,but that is not the main point.                                                                        


        }
        }
    })

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Существует много способов обработки асинхронных ответов, но способ jQuery немного отличается, поэтому, когда вы уже используете jQuery, обработайте его следующим образом: 

$('#button').on('click', AjaxHandler.setFlag)

class AjaxHandler {
  static setFlag () {
    this.loading = true
    this
      .asyncReq('ajax/set_flag.php')
      .done(function () {
        $('#div').html('Flag set')
      })
      .fail(function (err) {
        $('#div').html('Error setting flag. Reason: ' + err)
      })
      .always(function () {
        this.loading = false
      })
  }

  asyncReq (url) {
    return $.ajax({
      type: 'POST',
      url: url
    })
  }
})
0 голосов
/ 28 ноября 2018

Возможно, вы захотите использовать события здесь? 

$("#button").on("click", function() {
  $('body').trigger('getdata', ["", $('#div')]);
});
$('body').on('getdata', function(event, datasent, myelement) {
    var attach = event.delegateTarget;// the body here
    var getAjax = $.ajax({
        type: "POST",
        url: "ajax/set_flag.php",
        data: datasent // in case you need to send something
      })
      .done(function(data) {
        $(attach).trigger('gotdata', [data, myelement]);
      });
    getAjax.fail(function() {});

  })
  .on('gotdata', function(event, datathing, myelement) {
    myelement.html(!!datathing ? "Flag set", "Error setting flag");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Обратите внимание, что внутри этих обработчиков событий вы также можете вызывать некоторую функцию, передавать пространство имен для функции, в основном, делать это, как вам угодно для вашего дизайна.

...