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

Question

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

1. encapsulates $.ajax call:

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

2. handles the response:

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

3. handles any error:

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

在需要大量数据处理的页面中，我最终得到了很多看起来是重复的这些块，因此我决定进行一些重构。

我想可能有不同的方法可以解决这个问题。

1. 可以拥有一个可以在Ajax调用中重复使用的错误处理程序（显而易见）。
2. 可以重新使用某些响应处理程序，但这会很麻烦，因为响应根据调用而异。
3. 也许创建某种原型对象以提供基本功能，并具有用于错误处理的静态方法（JavaScript中是否可以做到这一点？）。

我只是想知道是否有人遇到过这种情况和/或是否有最佳实践解决方案？

- martijn_himself

---

看到一些代码会很有帮助。 - Ólafur Waage

Answer 1

你可以使用jQuery中的$.ajaxSetup({})方法来设置一些常用的ajax设置。

例如，如果你在某个页面上要一遍又一遍地向同一个URL发送POST请求，你只需在ajaxSetup中设置即可。这意味着你需要向Richard提供的函数传递的参数会更少。$.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'}});

- KyleFarris

---

在 https://api.jquery.com/jquery.ajaxsetup/ 上明确指出，不应使用此功能，因为它会影响插件。 - Martin Dawson

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（回调）

- Richard

---

公平地说，我认为KyleFarris的解决方案最优雅，所以我给了他答案 :)。 - martijn_himself

Answer 3

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

如果url没有改变，为什么要将其作为参数传递呢？您可以使用全局变量来保存url的主要部分，并只传递更改的url部分。

- James Black