重構許多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部分。