Более компактный способ написания AJAX-запросов.

Question

Я писал множество веб-приложений с php & mysql & jquery & bootstrap, и теперь пришло время решить эту проблему. Как написать более короткие запросы Ajax (отправка)? Если я хочу написать код, который работает и решает многие проблемы, он слишком длинный для каждого вызова ajax. Есть ли лучший способ или какая-нибудь библиотека / обертка, которая заставляет писать код SHORTER и FASTER, но, по крайней мере, все эти вещи

Я выглядел популярным axios, но, кажется, еще хуже

//JUST an example code, too complicated
var $btnStatusElem = $("#passwordreset").button('loading');
$.ajax({
    type: "POST",
    cache: false,
    url: "pwreset.php",
    data: postdata
    success: function(data) {
        $btnStatusElem.button('reset');
        try {
            var datajson = JSON.parse(data);
        }
        catch (e) {
            alert('Unexpected server error');
            return false;
        };

        if (datajson['success'] == true) {
            //do the OK stuff 
        } else {
            //show the error code, and stuff
            return false;
        }

},//success
error: function(msg) {
    alert('ERROR');
    $('#passwordreset_result').html(msg);
}
});

Для моего кода, ajax-запроса, я хочу, чтобы он сделал следующие шаги: 1. Отключите кнопку отправки во время публикации (включите также через 15 секунд, а не оставляйте ее отключенной до обновления страницы) 2. Он отправляет JSON, ожидает, что JSON вернется 3. Если на сервере есть какая-либо ошибка, он НЕ возвращает json, а возвращает ошибку. Тогда код остановит все js выполнение, если я не использую try ... catch. Это боль писать каждый раз 4. Если сервер возвращает ошибку проверки или другую ожидаемую ошибку, я должен обнаружить это и показать пользователю 5. Если все в порядке, делайте вещи

Answer 1

Как и при любом рефакторинге, идентифицируйте и изолируйте повторяющийся код и передайте уникальные биты.В этом случае, например, вы можете изолировать вызов ajax и синтаксический анализ json в функцию и передать URL, данные и т. Д.

Эта функция может вернуть обещание , которое разрешает /при необходимости отклоняет.

Учитывая приведенную ниже функцию doRequest (псевдокод, не тестировался и, возможно, потребуется небольшая подстройка для реального использования), вы можете использовать ее повсеместно с меньшим количеством нажатий клавиш:

doRequest('pwreset.php', postdata, button)
  .then(result => {
    // do something with the result
  })
  .catch(error => {
    // deal with the error
  });

или

try {
  const result = await doRequest('pwreset.php', postdata);
  // do something with result
}
catch (e) {
  // handle error
}

Все элементы шаблона находятся в doRequest.

async function doRequest(url, data, button, type = "POST") {
  return new Promise((fulfill, reject) => {
    $.ajax({
      type,
      url,
      data,
      cache: false,
      success: function(data) {
        $btnStatusElem.button('reset');
        try {
          const datajson = JSON.parse(data);
        } catch (e) {
          return reject(e);
        };

        return datajson['success'] == true ?
          fulfill(datajson) :
          reject(datajson);
      }, //success
      error: function(msg) {
        return reject(msg);
      }
    });
  })
}

Как говорит @ mister-jojo , вы также можете рассмотреть возможность использования [fetch api] вместо jQuery, но применяется тот же принцип.