javascript - 实现通用 jquery ajax 函数

Question

我有一个 web 应用程序，已被重构为使用格式中的单个全局变量

app.module.function
app.module.submodule.function

我想重构我现有的泛型

function getData(id, type, url, successHandler, rel) {

  var func = window[successHandler]

  $.ajax({
    type : "POST",
    url : url,
    data : {"search" : id, "type" : type, "rel" : rel},
    dataType: "json",
    success : function(data) {
      if (func && typeof func === "function") {
        func(data, id, 0);
      }
    }
  });
}

函数来利用传入的成功处理程序。例如，这样的成功处理程序之一是 clientRelationshipHandler。

如果处理程序定义为

function clientRelationshipHandler(results, id, type) { .. }

然后 window["clientRelationshipHandler"] 返回一个函数。

但是，如果我将其更改为

app.module.submodule.clientRelationshipHandler = function(results, id, type { .. }

两者

window["clientRelationshipHandler"]
window["app;.module.submodule.clientRelationshipHandler"]

返回未定义，因此破坏了通用的getData功能。使用绑定(bind)到特定对象的函数时，如何为 Ajax 查询实现通用成功处理程序？

Answer 1

我要求用户将函数引用传递给getData，而不是字符串:

function getData(id, type, url, successHandler, rel) { 
  $.ajax({
    type : "POST",
    url : url,
    data : {"search" : id, "type" : type, "rel" : rel},
    dataType: "json",
    success : function(data) {
      if (successHandler && typeof successHandler === "function") {
        successHandler(data, id, 0);
      }
    }
  });
}

// called as
getData(id, type, url, app.module.submodule.clientRelationshipHandler, rel);

那么你的函数就不必关心回调的存储位置，这使得它更加可重用(这就是回调应该如何工作)。

如果您想在回调中保留 this，请接受附加参数 thisObj 并使用 successHandler.call(thisObj, data, id, 0 ) 或让用户自己处理(例如通过使用 .bind 或提供匿名函数)。

<小时/>

更好的解决方案(IMO)是使用 promises :

function getData(id, type, url, rel) {
  return $.ajax({ // return the promise that `$.ajax` returns
    type : "POST",
    url : url,
    data : {"search" : id, "type" : type, "rel" : rel},
    dataType: "json"
  });
}

然后称为

getData(id, type, url, rel).then(function(result) {
    app.module.submodule.clientRelationshipHandler(result, id, 0);
});

这将您的代码与回调管理完全解耦，并且调用代码可以以任何它想要的方式处理响应。