javascript - 用于可重用性的通用 $.ajax() 调用函数

Question

我正在创建一个应用程序，我在其中对远程服务器进行大量 ajax 调用并广泛使用它们。由于所有调用中的代码几乎相同，我想创建一个可以重用的新函数。我很高兴为“数据”参数定义参数结构。我将在下面解释我的问题。

下面提供了我当前的 ajax 调用示例。

当前调用示例:

$.ajax({
    beforeSend: function() {
        $.mobile.loading('show');
    },
    complete: function() {
        $.mobile.loading('hide');
    },
    type: 'GET',
    url: 'http://localhost/test-url/',
    crossDomain: true,
    data: {appkey: '1234567', action: 'action1','name':'me'},
    dataType: 'jsonp',
    contentType: "application/javascript",
    jsonp: 'callback',
    jsonpCallback: 'mycallback',
    async: false,
    error: function() {
        //some operations
    },
    success: function(data) {
        //some operations
    }
});

我创建的可重用函数:

function newAjax(parm, successCallback, errorCallback) {
    $.ajax({
        beforeSend: function() {
            $.mobile.loading('show');
        },
        complete: function() {
            $.mobile.loading('hide');
        },
        type: 'GET',
        url: 'http://localhost/test-url',
        crossDomain: true,
        data: {appkey: '1234567', parm: parm},
        dataType: 'jsonp',
        contentType: "application/javascript",
        jsonp: 'callback',
        jsonpCallback: 'mycallback',
        async: false,
        success: function() {
            successCallback();
        },
        error: function() {
            errorCallback();
        }
    });
}

问题:

• 我将通过“parm”参数传递 ajax 调用的参数。我希望将数据值直接添加到父“数据”参数中。而不是作为数据的子对象。 appKey 在所有调用中保持不变，因此我将其保留在实际函数中。

• 我希望成功和错误回调函数都是可选的。如果未提供，则应忽略它们。

Answer 1

1. 您可以使用 jQuery.extend 方法将两个或多个对象组合在一起。

   data: jQuery.extend({appkey: '1234567'}, parm),
   

2. 您可以使用 typeof var === 'function' 检查您是否确实传递了 successCallback 和 errorCallback 函数；

   success: function () {
       if (typeof successCallback === 'function') {
           successCallback();
       }
   }, 
   
   error: function () {
       if (typeof errorCallback === 'function') {
           errorCallback();
       }
   }
   

   ...尽管如果您只是返回由 AJAX 请求创建的 Promise 并让调用者添加他们的成功、错误处理程序(如果他们愿意的话)可能更好；

   function newAjax(parm) {
      return jQuery.ajax({
          /* as before, but without success and error defined */
      });
   }
   

   ...然后:

   newAjax().done(function () {
       // Handle done case
   }).fail(function () {
       // Handle error case.
   });
   

   如果调用者不想添加错误处理程序，他们只是不调用 fail();

   newAjax().done(function () {
       // Handle done case
   });