javascript - 重构许多 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;
   }

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

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

1. 一个错误处理程序可以在 Ajax 调用中重复使用(显而易见)。
2. 也许可以重用一些响应处理程序，但这会很尴尬，因为响应因调用而异。
3. 或许可以创建某种原型(prototype)对象，提供基本功能并具有用于错误处理的静态方法(这可以在 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'}});