Question

我想为我的Ajax调用提供一个方便的方法，因为它在项目中被广泛使用。

截至目前，项目中的典型调用看起来像这样。

$.post(
  "url",
  {
    param1: value1,
    param2: value2
  },
  function (data) {}
);

这个调用在项目中使用不同的参数重复多次，所以我希望能够创建一个函数，我可以传递参数，它将处理整个Ajax调用，而不必每次都编写代码。预期产出：

var data= {firstName:"John", lastName:"Doe", age:46};
do_ajax_request(data);

函数do_ajax_request依次包含实际的Ajax代码，该代码生成实际请求并处理结果。如果可能的话，我也希望它能够在我需要执行任何额外操作的情况下返回回调，承诺是否适用于此？这将是一个全局函数，因此我可以从任何JavaScript文件访问它。

Answer 1

jQuery支持开箱即用的许多复杂答案。把我的评论转到答案。

您基本上只是为包装器编写包装器，因此您无需重新编码某些基本行。没有坏处，因为很容易在一个地方做出改变而不是很多。

所以定义了你的函数，只返回jQuery所拥有的Ajax对象。您可以使用done，fail，always方法。

function do_ajax_request (data) { 
  return $.post("url", data); 
}

do_ajax_request({"foo":"bar"})
  .done( function(){})
  .fail(function(){})

do_ajax_request({"foo":"bar"})
  .done( function(){})
  .fail(function(){})

如果你想在里面有公共代码，你也可以这样做，错误处理程序的基本思想......

function do_ajax_request (data) { 
  var xhr = $.post("url", data);
  xhr.fail(function () {
    console.log(arguments)
  });
  return xhr;
}

Answer 2

我已经编写了几个用于我的项目的jQuery插件，并且几乎每个人都带了我的ajax调用方法。这是我的一个项目的片段。享受！

方法签名：

obj =要传递给data参数中的ajax调用的对象。如果不需要，则传递null。
method = ajax方法：POST，GET，PUT，DELETE等。默认为GET。
endPoint =要拨打的电话。
returnType = html，json，text等
success =呼叫成功时的回叫方法。
beforesend =发送前调用的方法。当您需要在呼叫前设置标头时，这非常有用。
failure =呼叫失败时的回叫方法。


var _api = {
        call: function (obj, method, endPoint, returnType, success, beforesend, failure) {
            obj = obj === null || undefined ? {} : obj;
            $.ajax({
                method: method || 'GET',
                data: !$.isEmptyObject(obj) ? JSON.stringify(obj) : null,
                contentType: function () {
                    switch (returnType) {
                        case 'json':
                            return 'application/json';
                        case 'text':
                            return 'text/plain';
                        case 'buffer':
                            return 'arraybuffer';
                        case 'html':
                        default:
                            return 'text/html';
                    }
                }(returnType === 'json' ? 'application/json; charset=utf-8' : ''),
                url: endPoint,
                dataType: returnType,
                beforeSend: function (xhr, obj) {
                    if (beforesend) {
                        beforesend(xhr, obj);
                    } else {
                        _api.showLoader();
                    }
                }
            }).done(function (data, textStatus, xhr) {
                if (success) success(data)
            }).fail(function (data, textStatus, xhr) {
                if (failure) failure()
            }).always(function () {
                // Implement code here that you want to run whenever the call is complete regardless of success or failure.
            });

        }
}

Answer 3

您可以使用构造函数创建原型来处理输入 - 发出请求并处理响应：

ajax.requests = function ( data ) {
    this.data = data;
    return this.doRequest();
};

ajax.requests.prototype = {

    doRequest : function () {
        var _this = this;
        $.ajax({
            data: _this.data
        }).done(function(data) {
            Handle response and return!
        });
    }

};

// USAGE

var response = new ajax.requests( yourData );

Answer 4

通过返回 $.post，您可以使用.done()之类的回调，将它们与.then()连在一起等等。

function do_ajax_request(data) {
    return $.post( ... );  //RETURN the object
}

var myData = { ... };
do_ajax_request(myData).done(function(result) {
    console.log("AJAX complete: " + result);
});

Answer 5

另一种看法，也许你没有考虑过。不要试图包装本质上已经是包装器的东西，而是考虑封装你的常用功能，比如处理错误和处理结果，并在使用现有的jQuery ajax包装器执行ajax请求时使用它

function handleError(e){
   // your common error handling
}

function handleResult(result){
   // your common result handling
}

// then every time you execute a request, use your shared functionality
$.post(url, data)
   .fail(handleError)
   .done(handleResult);

Answer 6

使用下面的代码，您需要导入配置对象或在函数之上声明。

我分别为POST和GET制作了两个版本

function getJSON(param, absoluteRestUrl = '') {
    if (!absoluteRestUrl) {
        absoluteRestUrl = config.adminRestEndpoint; // defaultUrl
    }
    return new Promise(async (resolve, reject) => {
        let res = null;
        res = await $.getJSON(absoluteRestUrl, param);
        resolve(JSON.parse(JSON.stringify(res)));
    });
}

function postJSON(param, absoluteRestUrl = '') {
    if (!absoluteRestUrl) {
        absoluteRestUrl = config.adminRestEndpoint; // defaultUrl
    }
    return new Promise(async (resolve, reject) => {
        let res = null;
        res = await $.post(absoluteRestUrl, param, null, 'json');
        resolve(JSON.parse(JSON.stringify(res)));
    });
}

用于jQuery的AJAX包装器

6 个答案: