重构许多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(回调)