Рефакторинг многих вызовов jQuery Ajax - лучший метод?

Question

У меня много блоков кода JavaScript / jQuery для обработки асинхронных обработка данных на моей странице. Каждый кодовый блок имеет три функции (код неполный и только для иллюстрации):

1. инкапсулирует $.ajax вызов:

   function doSomething(data){
   
     // do some preprocessing 
   
     $.ajax({}); // some JQuery Ajax operation that accepts data
   
     // do some postprocessing
     return false;
   }

2. обрабатывает ответ:

   function handleResponse(result){  
     // process the result
     return false;
   }

3. обрабатывает любую ошибку:

   function handleError(XMLHttpRequest, textStatus, errorThrown){  
     // gracefully handle the Error and present relevant information to user
     return false;
   }

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

Я полагаю, что есть разные способы сделать это.

1. Можно иметь один обработчик ошибок, который можно повторно использовать в вызовах Ajax (очевидно).
2. Можно было бы использовать некоторые обработчики ответов, но это было бы неудобно, поскольку ответы сильно различались в зависимости от вызова.
3. Может быть, создать какой-нибудь объект-прототип, который обеспечивает базовую функциональность и имеет статический метод для обработки ошибок (это можно сделать в JavaScript?).

Мне просто интересно, сталкивался ли кто-нибудь с этим и / или есть ли для этого наилучшее решение?

Answer 1

Вы можете использовать метод $ .ajaxSetup ({}) в jQuery для установки некоторых общих настроек ajax.

Например, если вы собираетесь публиковать один и тот же URL снова и снова на одной странице, вы можете просто установить это в ajaxSetup. Это будет означать, что вам нужно будет передавать меньше параметров в функцию, подобную той, которую предоставляет Ричард. Любое свойство первого параметра метода ajax может быть установлено по умолчанию в $ .ajaxSetup ().

$.ajaxSetup({
    url: 'my/ajax/url'
    success: function() {
        // Do some default stuff on success
    },
    error: function() {
        // Do some default stuff on a failure
    }
    // etc...
});

Они могут быть переопределены при любом вызове ajax. Итак, теперь вы можете просто сделать:

$.ajax({data:{foo:'bar',bar:'foo'}});

И вы можете переопределить URL, например, так:

$.ajax({url:'different/ajax/url',data:{foo:'bar',bar:'foo'}});

Answer 2

Мы часто использовали функцию-оболочку для вызова Ajax, чтобы упростить использование, чтобы вы могли сделать это:

function NewAjax(url, data, success)
{
    $.ajax({
      url: url,
      data: data,
      success: success,
      fail: function ()
      {
        // Do generic failure handling here
      }
}

Но я часто предпочитаю привязываться к каждому событию ajax, используя события jQuery ajax:

http://docs.jquery.com/Ajax

, чтобы вы могли связываться с каждым провалом или успехом каждого вызова ajax, например:

ajaxError (обратный вызов) ajaxSuccess (обратный вызов)

Answer 3

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

Если URL-адрес не изменяется, тогда зачем передавать его в качестве параметра, вы можете иметь глобальную переменную, которая будет иметь основную часть URL-адреса, и просто передавать часть URL-адреса, которая изменяется.