Question

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

封装$.ajax来电：

function doSomething(data){

  // do some preprocessing 

  $.ajax({}); // some JQuery Ajax operation that accepts data

  // do some postprocessing
  return false;
}

处理响应：

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

处理任何错误：

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

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

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

可以有一个错误处理程序可以在Ajax调用中重用（显而易见）。
可以重用一些响应处理程序，但这会很麻烦，因为响应因呼叫而异。
也许创建一些提供基本功能的原型对象，并有一个静态的错误处理方法（这可以在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部分。 / p>

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

3 个答案: