如何將來自多個AJAX請求的數據用於不同的功能或創建一個全局使用的值數組

Question

我使用Business Catalyst API創建我的第一個應用程序使用AJAX GET，POST，PUT和DELETE請求，我遇到的問題是有時候我需要從不同的GET調用中獲取數據來生成新的請求，顯然我在如何有效地完成它的過程中有點遺憾。

讓說我有Ajax調用獲取API數據以JSON格式像這樣的結構：

function createOrderStatuses(){ 
    var access_token = BCAPI.Helper.Site.getAccessToken(); 
    $.ajax({ 
     url: "/webresources/api/v3/sites/current/orderstatuses", 
     type: "GET", 
     connection: "keep-alive",  
     contentType: "application/json", 
     headers: APIauthorization, 
     success: function (status) { 
     console.log(status); 
     $.each(status.items, function(items, statuses){ 
     var statusTemplate = '<ul class="large-12 columns margin-distributed statusClass" id="'+ statuses.id +'"><h4 class="lato-bold">' + statuses.label + '</h4></ul>'; 
     var changeSelection = '<select class="orderCurrentStatus"><option selected value="'+statuses.id+'">'+status.label+'</option></select>'; 
     if (statuses.label !== "EXCHANGE FEE PAID"){ 
     $("#ordersContainer").append(statusTemplate); 
     $("#ordersContainer li span.changeStatus[id="+statuses.id+"]").append(changeSelection); 
     } 
     }); 
    } 
    }); 

然後我創造我的命令，像這樣：

function getOrders(){ 
    var dateFrom = appSettings.dateFrom+"T00:00:00"; 
    var dateTo = appSettings.dateTo+"T00:00:00"; 
    var orderData; 
    $.ajax({ 
     url: '/webresources/api/v3/sites/current/orders?fields=id,entityId,categoryId,statusTypeId,discountCodeId,paymentMethodTypeId,taxCodeId,giftVoucherId,assignedUserId,name,countryCode,shippingPrice,shippingTaxRate,discountRate,giftVoucherAmount,totalPrice,shippingDescription,shippingAttention,shippingInstructions,quote,invoiced,invoiceNumber,invoiceDate,createDate,lastUpdateDate,destinationAddressIsResidential,isIntermediate,shippingRateKey,status,discountCode,workflow,customer,company,taxCode,assignedUser&skip=0&limit=500&order=-invoiceNumber&where={"createDate":{"$gte":"'+dateFrom+'"},"invoiceDate":{"$lte":"'+dateTo+'"}}', 
     type: "GET", 
     connection: "keep-alive",  
     contentType: "application/json", 
     headers: APIauthorization, 
     success: function (orders) { 
     console.log(orders); 
     orderData = orders; 

     $.each(orders.items, function(order){ 

     var createDate = new Date(order.invoiceDate); 
     var orderTemplate = 
      '<li class="f-16 expanded callout medium-collapse mid-gray-bg ordersList"><span class="large-4 medium-4 small-12 columns ordername"><i class="fa fa-file-text-o"></i> <a class="gray" href="https://bestkilts.worldsecuresystems.com/CRM/OrderDetailsv2.aspx?EntityID='+order.entityId+'&EntityType=1001&OrderID='+order.id+'"> '+ order.name+"/"+order.countryCode+'</a></span><span class="large-2 medium-2 small-4 columns date center">'+ createDate.getFullYear() + "-" + ("0" + (createDate.getMonth() + 1)).slice(-2) + "-" + ("0" + createDate.getDate()).slice(-2) +'</span><span class="large-1 medium-2 small-4 columns amount center">£'+order.totalPrice+'</span><span class="large-1 medium-1 small-4 columns invoice center">'+order.invoiceNumber+'</span><span class="large-2 medium-2 small-6 columns action center f-12">'+order.lastUpdateDate+'</span><span class="large-2 medium-3 small-6 columns action center changeStatus" id="'+order.statusTypeId+'"></span></li>'; 
     if(orders){ 
     $("#ordersContainer .statusClass[id="+order.statusTypeId+"]").append(orderTemplate); 
     var invoicesCounter = $('.ordersList').length; 
     $("#ordersCount").text(invoicesCounter); 
     } 
     return "order"; 
     }); 
    } 
    });// getOrders retrieve 

但是，如果我想從獲取值/數據getOrders（）;例如order.id傳遞到一個新的函數getCustomers（）和用於編譯整個事情作爲一個結果我無法做到這一點！？

function getCustomers(order){ 
    var orderInfo = getOrders(); 
    $.ajax({ 
      url: '/webresources/api/v3/sites/current/orders/'+orderInfo.id+'?fields=status,discountCode,workflow,customer,taxCode', //NEED THE ID FROM ORDERS HERE 
      type: "GET", 
      connection: "keep-alive",  
      contentType: "application/json", 
      headers: APIauthorization, 
      success: function (customer) { 
      console.log(customer); 
       var orderCustomer = "" ; 
      $.each(customer.items, function(customer){ 
       orderCustomer = customer; 
      $("#ordersContainer").prepend('<span> class="customer">"'+orderCustomer.name+'"</span>'); 
       }); 
      } 
      });// get customer name for order  
} 
getCustomers(); 

結論收集來自不同的請求的信息，並嘗試在一個單一的結果Anywhere入門使用它們，我需要一個解決方案，我可以從3個功能/來電或以上所有的數據，如果涉及到發生！並創建一個將3中的所有數據合併到ordersContainer中的orderDeployment（）函數。

你的幫助是非常apreciated，在先進的感謝..

Answer 1

$.ajax()返回對象jqXHR（XMLHttpRequest的jQuery的超集），它實現了jQuery無極接口（更多信息請參見Deferred對象）。

我不知道，如果你熟悉承諾的概念，但即使jQuery有它自己的實現無極，定義from MDN documentation也適用於jQuery的實現：

無極對象用於異步計算。約定 表示可能現在或將來可用的值，或永遠不可用的值。

所以，你可以使用：

• .then()到連鎖異步操作
• $.when()如果您需要等待程序，如之前多個異步操作的結果。

$.when($.ajax('/page1.php'), $.ajax('/page2.php')).done(function(a1, a2){ 
    // eg. Perform another $.ajax call based on the results a1 and a2 
}); 

簡單的例子，其中用戶的列表首先被裝載，那麼每個用戶的職務檢索基於用戶ID：

var root = 'https://jsonplaceholder.typicode.com'; 
 
\t \t \t 
 
// Returns 10 users 
 
function getUsers() { 
 
    return $.ajax({ 
 
    url: root + '/users', 
 
    method: 'GET' 
 
    }); 
 
} 
 

 
// Returns posts based on user id 
 
function getUserPosts(userId) { 
 
    return $.ajax({ 
 
    url: root + '/posts?userId=' + userId, 
 
    method: 'GET' 
 
    }); 
 
} 
 

 
// Once users list is retrieved, we can fetch posts for each users 
 
getUsers().then(function(users) { 
 
    console.log('Users retrieved from API:', users); 
 
    $.each(users, function(i, user) { 
 
    getUserPosts(user.id).then(function(posts) { 
 
     console.log('Posts fetched for user', user.name, posts); 
 
    }); 
 
    }); 
 
});

<script 
 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
    crossorigin="anonymous"></script>