Как использовать данные из нескольких запросов AJAX в разные функции или создавать массив значений, которые будут использоваться глобально

Question

Я создаю свое первое приложение с помощью API Business Catalyst для получения запросов GET, POST, PUT, DELETE с использованием AJAX, проблема у меня есть что иногда мне нужно захватывать данные из разных вызовов 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(); 

Вывод сбор информации из различных запросов и попытаться использовать их в одном результате становится все в любом месте, мне нужно решение, где я могу получить все данные из 3-х функций/вызовов или больше, если приходит случиться ! и создать функцию orderDeployment(), объединяющую все данные из 3 в orderContainer.

Ваша помощь очень apreciated, спасибо передовой ..

Answer 1

$.ajax() возвращает jqXHR (JQuery супернабор XMLHttpRequest) объекта, который реализует интерфейс JQuery Promise (см Deferred объект для получения дополнительной информации).

Я не знаю, если вы знакомы с концепцией Promise, но даже если Jquery имеет свою собственную реализацию Promise, определение from MDN documentation также подходит для реализации JQuery:

Объект Promise является используется для асинхронных вычислений. A Promise представляет значение, которое может быть доступно сейчас или в будущем, или никогда.

Таким образом, вы можете использовать:

• .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 
}); 

Простой пример, когда список пользователей загружается первым, то сообщения каждого пользователя извлекаются на основе идентификатора пользователя:

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>