如何将来自多个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>