Creating multiple asynchronous calls within a loop in JavaScript

Question

Creating multiple asynchronous calls within a loop in JavaScript

I am currently working on a task in my gulpfile.js that involves uploading an app using Gulp and SharePoint.

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const spsync = require('gulp-spsync-creds').sync;
const sppkgDeploy = require('node-sppkg-deploy');

const config = require('./dev-config.json');
var coreOptions = {
        siteUrl: config.coreOptions.siteUrl,
        appCatalog: config.coreOptions.appCatalog
    };
var creds = {
        username: config.creds.username,
        password: config.creds.password
    };

build.task('upload-single-app', {
  execute: (config) => {
      return new Promise((resolve, reject) => {
          const pluginList = require('./config/plugin-deployment.json');
          if (pluginList)
          {
            for (let i = 0; i < pluginList.plugins.length; i++) {
                  const folderLocation = `./plugins/` + pluginList.plugins[i].name;
                  for (let x = 0; x < pluginList.plugins[i].sites.length; x++) {

                        console.log(pluginList.plugins[i].sites[x]);
                        return gulp.src(folderLocation)
                        .pipe(spsync({
                            "username": creds.username,
                            "password": creds.password,
                            "site": coreOptions.siteUrl + pluginList.plugins[i].sites[x],
                            "libraryPath": coreOptions.appCatalog,
                            "publish":: true
                        }))
                        .on('finish', resolve);
                      }//end inner for
              }// end for
          } else {
            console.log("Plugin list is empty");
          }
        });
  }
});

Here is the JSON data that drives this process:

{
  "plugins":
  [
    {
      "name": "Bluebeam.OpenRevuExtension.sppkg",
      "description": "some description",
      "version":"20.2.30.5",
      "sites":["sp_site1","sp_site2"]
    }
  ]
}

Upon running the code, the package successfully deploys to site1 but not site 2 without any errors. The output looks like this:

devbox:plugintest admin$ gulp upload-single-app
Build target: DEBUG
[14:51:48] Using gulpfile /src/plugintest/gulpfile.js
[14:51:48] Starting gulp
[14:51:48] Starting 'upload-single-app'...
sp_site1
[14:51:48] Uploading Bluebeam.OpenRevuExtension.sppkg
[14:51:50] Upload successful 1919ms
[14:51:51] Published file 982ms
[14:51:51] Finished 'upload-single-app' after 2.92 s
[14:51:51] ==================[ Finished ]==================
[14:51:52] Project plugintest version:1.0.0
[14:51:52] Build tools version:3.12.1
[14:51:52] Node version:v10.24.1
[14:51:52] Total duration:6.48 s

I'm considering refactoring the code into two separate tasks to handle deployment to multiple sites asynchronously. Here is a pseudocode example of what I have in mind:

build.task('main', {
     for each plugin in json file {
         for each site I need to deploy to {
             call build.task('upload_app');
             call build.task('deploy_app');
         }
     }
  });

Do you think this approach is suitable? Any suggestions on how to implement it effectively?

Thank you.

javascript sharepoint gulp

Answer 1

Answer №1

Your behavior is currently being influenced by a single Promise that resolves during the first loop iteration, triggering resolve when the initial site completes.

Sequential Approach

To improve this, consider having a separate Promise for each site within the second loop. Utilize an async / await structure to ensure that each site's Promise resolves before moving on to the next one in the loop.

build.task("upload-single-app", {
  execute: async () => {
    const pluginList = require("./config/plugin-deployment.json");

    if (!pluginList) {
      return;
    }
    
    for (const { name, sites } of pluginList.plugins) {
      const folderLocation = `./plugins/${name}`;

      for (const site of sites) {
        // Wait for each gulp pipeline to finish before proceeding.
        await new Promise((resolve) => {
          gulp
            .src(folderLocation)
            .pipe(
              spsync({
                username: creds.username,
                password: creds.password,
                site: coreOptions.siteUrl + site,
                libraryPath: coreOptions.appCatalog,
                publish: true,
              })
            )
            .on("finish", resolve);
        });
      }
    }
  },
});

Parallel Approach

Alternatively, iterate through each site and create a Promise with the map function of an array. Aggregate all promises into a single array and use Promise.all() to wait until all promises are fulfilled concurrently.

build.task("upload-single-app", {
  execute: async () => {
    const pluginList = require("./config/plugin-deployment.json");

    if (!pluginList) {
      return;
    }
    
    const pluginBuilds = await Promise.all(pluginList.plugins.flatMap(({ name, sites }) => {
      const folderLocation = `./plugins/${name}`;

      return sites.map(site => new Promise((resolve) => {
        gulp
          .src(folderLocation)
          .pipe(
            spsync({
              username: creds.username,
              password: creds.password,
              site: coreOptions.siteUrl + site,
              libraryPath: coreOptions.appCatalog,
              publish: true,
            })
          )
          .on("finish", resolve);
      }));
    }));

    return pluginBuilds;
  },
});

Answer 2

Your behavior is currently being influenced by a single Promise that resolves during the first loop iteration, triggering resolve when the initial site completes.

Sequential Approach

To improve this, consider having a separate Promise for each site within the second loop. Utilize an async / await structure to ensure that each site's Promise resolves before moving on to the next one in the loop.

build.task("upload-single-app", {
  execute: async () => {
    const pluginList = require("./config/plugin-deployment.json");

    if (!pluginList) {
      return;
    }
    
    for (const { name, sites } of pluginList.plugins) {
      const folderLocation = `./plugins/${name}`;

      for (const site of sites) {
        // Wait for each gulp pipeline to finish before proceeding.
        await new Promise((resolve) => {
          gulp
            .src(folderLocation)
            .pipe(
              spsync({
                username: creds.username,
                password: creds.password,
                site: coreOptions.siteUrl + site,
                libraryPath: coreOptions.appCatalog,
                publish: true,
              })
            )
            .on("finish", resolve);
        });
      }
    }
  },
});

Parallel Approach

Alternatively, iterate through each site and create a Promise with the map function of an array. Aggregate all promises into a single array and use Promise.all() to wait until all promises are fulfilled concurrently.

build.task("upload-single-app", {
  execute: async () => {
    const pluginList = require("./config/plugin-deployment.json");

    if (!pluginList) {
      return;
    }
    
    const pluginBuilds = await Promise.all(pluginList.plugins.flatMap(({ name, sites }) => {
      const folderLocation = `./plugins/${name}`;

      return sites.map(site => new Promise((resolve) => {
        gulp
          .src(folderLocation)
          .pipe(
            spsync({
              username: creds.username,
              password: creds.password,
              site: coreOptions.siteUrl + site,
              libraryPath: coreOptions.appCatalog,
              publish: true,
            })
          )
          .on("finish", resolve);
      }));
    }));

    return pluginBuilds;
  },
});

Creating multiple asynchronous calls within a loop in JavaScript

Answer №1

Sequential Approach

Parallel Approach

Similar questions

Tips on effectively storing extra object properties across all entries in a MongoDB document group

What steps do I need to take to extract the date and month from a single datepicker using the code below?

Vanilla JavaScript - Conceal all remaining div elements

Retrieving FormData() parameters sent via Ajax with PHP

Attempting to establish both the minimum and maximum time date in a jQuery datepicker across two separate inputs

Error: The "render" method is not available for the IncomingMessage object

Using the express.Router instance for handling errors can be a useful tool in your development

How can I correctly update values from a sibling component that has been imported in Vue.js 2.0?

The JSON file overwrites entire objects instead of targeting individual ones

Error: Invariant Violation occurred with code 29 while using React Apollo and GraphQL

Using Node.js to create a RESTful API that pulls information from MongoDB

Learn the steps to export a constant value in Next.js using React!

Ensure that the execution of the function is completed before moving on to the next iteration within a $.each loop

NServicebus JavaScript message handler: Enhancing Communication

Disabling the shadow when setting the face color in Three.js

Issue with function incorrectly computing values and returning NaN

Utilizing reactjs (MERN stack) to dynamically update content on a single page based on both URL parameters and database queries

perform an action in PHP when a button is clicked

Controller encounters a error when requiring a module

Execute HTML and JS files through Eclipse PDT to view in a web browser