如何优化（最小化）jQuery AJAX 调用答案

【问题标题】：How to optimize (minimize) jQuery AJAX calls如何优化（最小化）jQuery AJAX 调用
【发布时间】：2013-11-01 09:55:27
【问题描述】：

我的代码有超过 50 个来自不同功能的 AJAX 调用。所有这些调用都具有相似的结构，具有不同的 data/url/callback 参数：

var jqXHR = $.post('/dba/port.php', {
        mode: "del_wallfunds",
        pdata: cdata,
        wname: wName
    },
    function (data) {}, "json")
    .done(function (data) {
        var msg = data.msg;
        if (msg.indexOf("Error") == -1) {
            alertify.success(msg);
            delSelected(selGroup);
        } else {
            alertify.error(msg);
        }
    })
    .fail(function () {
        alertify.error("Error .....");
    });

我正在考虑如何编写一个函数来返回该 var jqXHR 以最小化代码的总大小。传递所有静态变量（如 URL、错误字符串等）不是问题。但问题是“.done”上的所有回调函数都不同，我不知道如何传递这些回调函数作为变量。

一种方法是在 .done 上调用单个“通用”函数并将“开关”变量传递给该函数，但这似乎不是一个优雅的解决方案。

任何建议如何以某种优雅的方式实现它？

谢谢

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

在调用您的函数时将done 回调函数作为参数传递：

function ajaxCall(url, data, doneCallback) {
    return $.post(url, data, doneCallback, "json").fail(...);
    // or
    return $.post(url, data, function() {}, "json").done(doneCallback).fail(...);
}

var jqXhr = ajaxCall('yoururl.php', {key: 'value'}, function(data) {
    // do something
});

或者从函数中返回jqXhr对象，然后分配done回调：

function ajaxCall(url, data) {
    return $.post(url, data, function() {}, "json").fail(...);
}

var jqXhr = ajaxCall('yoururl.php', {key: 'value'});
jqXhr.done(function(data) {
    // do something
});

或者改用jQuery.ajax()，并将整个选项对象传入：

function ajaxCall(options) {
    return $.ajax(options).fail(...);
}

var jqXhr = ajaxCall({
    url: 'yoururl.php',
    data: {key: 'value'},
    dataType: 'json'
});
jqXhr.done(function(data) {
    // do something
});

【讨论】：

【解决方案2】：

你可以试试：

将“请求成功返回处理错误”转为“请求被拒绝”，
将“alertify”处理放在一个通用回调中

这是一个草图：

function myAjaxApi(url, data){
    var myAjaxCall = $.post(url, data, function (data) {}, "json")
    .then(function (data) {
    // using .then : change "request succesful with error state"
    //    to "rejected state"
        var msg = data.msg;
        if (msg !== undefined && msg.indexOf("Error") >= 0) {
            var dfd = $.Deferred();
        // try to match the same signature as the "error" option
            dfd.reject(this, msg);
            return dfd;
        } else {
            return data
        }
    });

    myAjaxCall.done(function(data){
        if (data.msg) {
            alertify.success(data.msg);
        }
    }).fail(function (jqxhr, msg) {
        if (!msg) {  msg = "Error .....";  }
        alertify.error(msg);
    });
    return myAjaxCall;
}

//usage
myAjaxApi('/dba/port.php', {mode: "del_wallfunds", pdata: cdata, wname: wName})
.done(function (data) {
// the ".done()" queue will not be executed if msg contains "Error" ...
    delSelected(selGroup);
});

有些部分应该写得更仔细；上面的示例旨在说明如何将重复的 ajax 调用包装在一个通用 api 中。

【讨论】：