重构许多jQuery Ajax调用 - 最佳实践？

Question

我有很多JavaScript / jQuery代码块来处理我页面中的异步数据处理。 每个代码块都有三个函数（代码不完整，仅用于说明目的）：

1. 封装$.ajax调用：

    function doSomething(data){ // do some preprocessing $.ajax({}); // some JQuery Ajax operation that accepts data // do some postprocessing return false; } 

2. 处理响应：

    function handleResponse(result){ // process the result return false; } 

3. 处理任何错误：

    function handleError(XMLHttpRequest, textStatus, errorThrown){ // gracefully handle the Error and present relevant information to user return false; } 

在一个需要大量数据处理的页面中，我最终有很多这些块似乎是重复的，所以我决定做一些重构。

我想有不同的方法来解决这个问题。

1. 可以有一个错误处理程序可以在Ajax调用中重用（显而易见）。
2. 人们可以重用一些响应处理程序，但这会很麻烦，因为响应因呼叫而异。
3. 也许创建一些提供基本功能的原型对象，并有一个静态的错误处理方法（这可以在JavaScript中完成吗？）。

我只是想知道是否有人遇到过此问题和/或是否有针对此的最佳实践解决方案？

Answer 1

您可以在jQuery中使用$ .ajaxSetup（{}）方法来设置一些常见的ajax设置。

例如，如果您要在某个页面上反复发布到同一个URL，则可以在ajaxSetup中进行设置。 这意味着您必须将更少的参数传递给Richard提供的函数。 ajax方法的第一个参数的任何属性都可以设置为$ .ajaxSetup（）中的默认值。

$.ajaxSetup({
    url: 'my/ajax/url'
    success: function() {
        // Do some default stuff on success
    },
    error: function() {
        // Do some default stuff on a failure
    }
    // etc...
});

它们可以在任何ajax调用中被覆盖。 所以，现在你可以这样做：

$.ajax({data:{foo:'bar',bar:'foo'}});

你可以覆盖URL，例如：

$.ajax({url:'different/ajax/url',data:{foo:'bar',bar:'foo'}});

Answer 2

我们经常使用包装器函数进行Ajax调用以简化使用，因此您可以这样做：

function NewAjax(url, data, success)
{
    $.ajax({
      url: url,
      data: data,
      success: success,
      fail: function ()
      {
        // Do generic failure handling here
      }
}

但我经常更喜欢使用jQuery ajax事件绑定到每个ajax事件：

http://docs.jquery.com/Ajax

所以你可以绑定每个ajax调用的每个失败或成功，例如：

ajaxError（回调）ajaxSuccess（回调）

Answer 3

正如Richard所示，查看代码片段之间的不同之处，并将它们作为参数传递给函数。 Javascript可以将函数作为参数传递，这可以消除大量冗余。

如果url没有改变，那么为什么将它作为参数传递，你可以有一个全局变量，它将包含url的主要部分，并且只传入更改的url部分。