重構使用promise對象的jquery ajax調用

Question

我正在通過身份驗證進行異步跨域調用。

當我驗證我用一個通用的get方法檢索實際應用數據：

define(['jquery'], function ($) { 
    return { 
     get: function (url, data) { 

      // Call to authenticate before retrieve data 
      $.ajax({ 
       type: 'POST', 
       url: 'root/authentication', 
       data: { user: root: password: root }, 
       dataType: 'json', 
       xhrFields: { 
        withCredentials: true 
       }, 
       complete: function (response) { 

        // Call to retrieve application data 
        $.ajax({ 
         beforeSend: function (xhr) { 
          xhr.withCredentials = true; 
         }, 
         type: 'GET', 
         url: root + url, 
         xhrFields: { 
          withCredentials: true 
         }, 
         async: true, 
         dataType: 'json', 
         crossDomain: true 
        }); 
       } 
      }); 
     } 
    }; 
}); 

的上述數據呼叫是通過另一種非通用代碼調用：

define(['cors'], 
    function(cors) { 
     return function CustomerService() {    
      function getCustomers() { 
       return cors.get('/customers'); 
      } 
      return { 
       getCustomers: getCustomers 
      }; 
     }; 
    }) 

在我的knockoutjs viewmodel我想這樣做：

當asyc調用執行renderCustomers函數和更新UI。

$.when(customerService.getCustomers()) 
      .done(renderCustomers) 
      .fail(); 


     function renderCustomers(customers) { 

      // Add data to knockout observables 
     } 

我需要改變什麼才能讓客戶進入renderCustomers功能？

現在的客戶是未定義的，我想這是因爲我的ajax調用沒有正確設置承諾。

Answer 1

在您的第一個片段中，您的Ajax調用在成功時不會對客戶數據做任何事情。試試這個：

define(['jquery'], function ($) { 
    return { 
     get: function (url, data) { 
       var result = $.Deferred(); // create a deferred object to return 
      $.ajax({ 
       type: "POST", 
       url: 'root/authentication', // you had a typo here 
       data: { user: root: password: root }, 
       dataType: 'json', 
       xhrFields: { 
        withCredentials: true 
       }, 
       complete: function (response) { 
        // Call to retrieve application data 
        $.ajax({ 
         beforeSend: function (xhr) { 
          xhr.withCredentials = true; 
         }, 
         type: "GET", 
         url: root + url, 
         xhrFields: { 
          withCredentials: true 
         }, 
         async: true, 
         dataType: 'json', 
         crossDomain: true 
        }).done(function(responseData){ 
          // resolve the manually created deferred object, and send it the customer data 
         result.resolve(responseData); 
        }); 
       } 
      }); 
      return result; // return your deferred object 
     } 
    }; 
}); 

需要注意的是，呼籲阿賈克斯做「是與調用「成功」。通過返回Deferred，你可以使用cors.getCustomers（）作爲延遲本身。

你可以重構你的最後片段刪除「當」呼叫，並使用來自直接GetCustomers的遞延有綁定你的淘汰賽：

customerService 
    .getCustomers() // this returns an deferred now so you can add done and fail events 
    .done(function(customers) { 

     // Add data to knockout observables 
     var elem = document.getElementById('myelement'); 
     ko.applyBindings(customers,elem); 
    });