Let me first say I have done a lot of searching for similar questions but haven't encountered one that contains the same logic.

I have a complex chain of ajax requests in my code that form part of a project deployment tool. A project is comprised of a set of user groups and data layers.

A group can have multiple data layers and there can be multiple groups.

Example:

New York: ['Police', 'Ambulance', 'Fire Department']

Boston: ['Police', 'Ambulance', 'Fire Department']

Each data layer is a 'view' of the main project dataset that holds the records. The data layers controls what records are shown (through a SQL query) and what fields are included in it.

I am having trouble using promises to wait for the ajax requests to complete before proceeding with the next step.

The main issue I have is that the for loops cause a break in the promise collection - the next step will fire after one groups layers have been created, when it should only fire after all groups have their layers created.

Please see my pseudo code for how the javascript code looks:

// A user can choose if data layers for each group of users is split
// between groups or shared between all groups. Data layers are then created
// based on this option.
userGroups = ['New York', 'Boston'];
userGroupPolicy = 'grouped' OR 'not grouped'; // depending on what user chooses
layerTypes = ['Police', 'Ambulance', 'Fire Department'];

if (userGroups are not grouped){
  for (each userGroup in userGroups){
    createLayers(userGroup, layers);
  }
}
else if (userGroups are grouped){
  createLayers(userGroups.join(", "), layers);
}

// when the createLayers function and sub functions have
// created/defined/added fields for the 6 layers
// continue with the createFolder function.
// Only one folder is ever needed for the project, no matter
// if the user groups are split or not, so the function should
// only run once and after all layers are completed.

when all promises have resolved({
  createFolder();
}):

// ------------------------------------------------------------
// Below is the createEmptyLayer function and sub functions.
// There are multiple layers that need to be created that
// can vary between 2 and 8 per group depending on what the user selects.
// The layers are linked to an already created dataset that holds all
// data.

function createEmptyLayers(userGroup, layers){
  for (each layer in layers){
    params = define params for layer; // (name, type, max record count...);
    $.ajax request to create the layer per layer type {
      layerParams: params
    }
    .done(
      // Now add the definition to the layer (definition query, capabilities, link it to dataset)
      addAttrToLayer(result from createEmptyLayers);
      );
    }
  }

function addAttrToLayer(result){
  attributes = bunch of definitions and linkages;
  $.ajax request to add the parameters to the layer{
    defineAttributes: attributes
  }
  .done(
    // Now the layer exists and is set to the dataset with all attributes required.
    // we can now choose what fields from the dataset will show in it.
    addFieldsToLayer(result from addAttrToLayer);
  )
}

function addFieldsToLayer(result){
  // some logic here defines the fields by
  // layer type from an ajax request to the main layer
  // (occurs prior to this chain of functions);
  $.ajax request to the layer {
    someAttr: result,
    fields: fieldsToShow
  }
  .done(
    return the result to the promise array
  )
}

How can I wait for the 6 results to complete before running the createFolder function using promises?

Many thanks.

CodePudding user response：

try Promise.all method to wait for all the input promises

CodePudding user response：

You can use .then() to chain all promise request to be called in a sequential way.

This .then() syntax support both jQuery and AngularJS

Code Sample

function first() {
  return $.ajax(...);
}
function second(data, textStatus, jqXHR) {
  return $.ajax(...);
}
function third(data, textStatus, jqXHR) {
  return $.ajax(...);
}

function main() {
  first().then(second).then(third);
}

Code sample was taken from this answer How do I chain three asynchronous calls using jQuery promises?