javascript - 如何将来自多个 AJAX 请求的数据使用到不同的函数中或创建要全局使用的值数组

Question

我使用 Business Catalyst API 创建我的第一个应用程序，以使用 AJAX 获取、发布、放置、删除请求，我遇到的问题是有时我需要从不同的 GET 调用中获取数据来生成新请求，显然我有点不知道如何有效地做到这一点。

假设我有一个 ajax 调用 block ，以 JSON 格式获取 API 数据，如下所示:

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();

从不同的请求中收集信息并尝试在一个结果中使用它们的结论是有道理的，我需要一个解决方案，我可以从 3 个函数/调用或更多函数/调用(如果发生)中获取所有数据!并创建一个 orderDeployment() 函数，将 3 中的所有数据组合到 ordersContainer 中。

我该怎么做？

Answer 1

$.ajax()返回一个 jqXHR(XMLHttpRequest 的 jQuery 超集)对象，该对象实现 jQuery Promise 接口(interface)(有关详细信息，请参阅 Deferred 对象)。

不知道你是否熟悉Promise这个概念，但是即使jQuery有自己的Promise实现，定义from MDN documentation对于 jQuery 实现也有效:

The Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never.

所以你可以使用:

• .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';
			
// 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>