`I vow to never delay until the task is complete``

Question

`I vow to never delay until the task is complete``

I am currently experimenting with chaining promises together in order to execute a series of requests. As someone who is fairly new to working with promises, I'm not entirely confident in my approach. I'm encountering an issue where the third promise does not wait for the second one to complete, resulting in incomplete information being retrieved.

After examining my functions, it seems that they are returning the correct information. My main question revolves around how I can structure my promises so that each one waits for the previous one to finish before proceeding?

function getPaths(folderpath) {
  return new Promise(function(resolve, reject) {
    db.getPaths(folderpath, function(response) {
      //get paths for files and folders
      for (let i = 0; i < response.entries.length; i++) {
        let entries = response.entries[i];
        if (entries[".tag"] == "folder") {
          folderPaths.push(response.entries[i].path_lower);
        }
        if (entries[".tag"] == "file") {
          filePaths.push(response.entries[i].path_lower);
        }
      }
      resolve();
    });
  });
}

function openFolders(folders) {
  return new Promise(function(resolve, reject) {
    for (let i = 0; i < folders.length; i++) {
      db.getPaths(folders[i], function(response) {
        for (let j = 0; j < response.entries.length; j++) {
          let entries = response.entries[j];
          if (entries[".tag"] == "file") {
            filePaths.push(response.entries[j].path_lower);
          }
        }
        //console.log(filePaths); //returns correct information
      });
    }
    resolve();
  });
}

getPaths("/path").then(function() {
  openFolders(folderPaths);
}).then(function() {
  console.log(filePaths); //returns incomplete information
});

javascript ajax promise

Answer 1

Answer №1

You are facing a significant issue highlighted in bold

function openFolders(folders) {
  return new Promise(function(resolve, reject) {
    for (let i = 0; i < folders.length; i++) {
      <b>db.getPaths(folders[i], function(response) {
        // ...
      });</b>
    }
    resolve();
  });
}</pre>

You have encountered a situation where you are executing a synchronous for loop around an asynchronous function call. The loop completes its iteration synchronously and then directly calls resolve(). This means that the asynchronous code inside the handler (e.g., filePaths.push(...)) does not execute before the Promise is resolved.



Your challenges do not end there. You are using Promises unconventionally by modifying global state and resolving an empty Promise with resolve() instead of resolve(someValue). @FrankModica's response delves deeper into this unconventional use.



To address these issues, I suggest exploring the usage of Promise.all and adopting a more standard approach when working with Promises.

In the example below, I have simulated your db function to read from a fictional in-memory database called fakedb. Subsequently, I created a getPaths function that wraps around db.getPaths but returns a Promise instead. Then, I revamped openFolders to create an array of Promises, pass them to Promise.all, and finally obtain the desired values upon resolution.

Note: Promise.all will execute the array of Promises in parallel. If running them sequentially is preferred, you can use .reduce in conjunction with .then.



const db = {
  getPaths: (path, k) => {
    setTimeout(k, 50, fakedb[path])
  }
}

function getPaths (path) {
  return new Promise((resolve, reject) =>
    db.getPaths(path, response => resolve(response)))
}

function openFolders (folders) {
  return Promise.all(folders.map(getPaths))
    .then(responses =>
      responses.reduce((acc, {entries}) =>
        acc.concat(entries.filter(x => x['.tag'] === 'file').map(x => x.path_lower)), []))
}

const fakedb = {
  'cat': {
    'entries': [
        { '.tag': 'dir', 'path_lower': './cat/.' },
        { '.tag': 'dir', 'path_lower': './cat/..' },
        { '.tag': 'file', 'path_lower': './cat/a' },
        { '.tag': 'file', 'path_lower': './cat/b' },
        { '.tag': 'file', 'path_lower': './cat/c' }
      ]
  },
  'dog': {
    'entries': [
        { '.tag': 'dir', 'path_lower': './dog/.' },
        { '.tag': 'dir', 'path_lower': './dog/..' },
        { '.tag': 'file', 'path_lower': './dog/a' },
        { '.tag': 'file', 'path_lower': './dog/b' },
        { '.tag': 'file', 'path_lower': './dog/c' }
      ]
  }
}

openFolders(['cat','dog']).then(console.log, console.error)




The operation performed within openFolders may seem intricate as it handles all transformations of the responses in a single .then handler. Optionally, you could segregate the tasks into multiple .then calls to alleviate cognitive load.

function openFolders (folders) {
  return Promise.all(folders.map(getPaths))
    // extract `.entries` from each response
    .then(responses =>
      responses.map(x => x.entries))
    // flatten array of entries arrays into a single array
    .then(arrOfEntries =>
      arrOfEntries.reduce((acc, entries) =>
        acc.concat(entries), []))
    // retain only entries where `.tag` is `'file'`
    .then(entries =>
      entries.filter(x => x['.tag'] === 'file'))
    // retrieve `path_lower` of resulting entries
    .then(entries =>
      entries.map(x => x.path_lower))
}

Answer 2

You are facing a significant issue highlighted in bold

function openFolders(folders) {
  return new Promise(function(resolve, reject) {
    for (let i = 0; i < folders.length; i++) {
      <b>db.getPaths(folders[i], function(response) {
        // ...
      });</b>
    }
    resolve();
  });
}</pre>

You have encountered a situation where you are executing a synchronous for loop around an asynchronous function call. The loop completes its iteration synchronously and then directly calls resolve(). This means that the asynchronous code inside the handler (e.g., filePaths.push(...)) does not execute before the Promise is resolved.



Your challenges do not end there. You are using Promises unconventionally by modifying global state and resolving an empty Promise with resolve() instead of resolve(someValue). @FrankModica's response delves deeper into this unconventional use.



To address these issues, I suggest exploring the usage of Promise.all and adopting a more standard approach when working with Promises.

In the example below, I have simulated your db function to read from a fictional in-memory database called fakedb. Subsequently, I created a getPaths function that wraps around db.getPaths but returns a Promise instead. Then, I revamped openFolders to create an array of Promises, pass them to Promise.all, and finally obtain the desired values upon resolution.

Note: Promise.all will execute the array of Promises in parallel. If running them sequentially is preferred, you can use .reduce in conjunction with .then.



const db = {
  getPaths: (path, k) => {
    setTimeout(k, 50, fakedb[path])
  }
}

function getPaths (path) {
  return new Promise((resolve, reject) =>
    db.getPaths(path, response => resolve(response)))
}

function openFolders (folders) {
  return Promise.all(folders.map(getPaths))
    .then(responses =>
      responses.reduce((acc, {entries}) =>
        acc.concat(entries.filter(x => x['.tag'] === 'file').map(x => x.path_lower)), []))
}

const fakedb = {
  'cat': {
    'entries': [
        { '.tag': 'dir', 'path_lower': './cat/.' },
        { '.tag': 'dir', 'path_lower': './cat/..' },
        { '.tag': 'file', 'path_lower': './cat/a' },
        { '.tag': 'file', 'path_lower': './cat/b' },
        { '.tag': 'file', 'path_lower': './cat/c' }
      ]
  },
  'dog': {
    'entries': [
        { '.tag': 'dir', 'path_lower': './dog/.' },
        { '.tag': 'dir', 'path_lower': './dog/..' },
        { '.tag': 'file', 'path_lower': './dog/a' },
        { '.tag': 'file', 'path_lower': './dog/b' },
        { '.tag': 'file', 'path_lower': './dog/c' }
      ]
  }
}

openFolders(['cat','dog']).then(console.log, console.error)




The operation performed within openFolders may seem intricate as it handles all transformations of the responses in a single .then handler. Optionally, you could segregate the tasks into multiple .then calls to alleviate cognitive load.

function openFolders (folders) {
  return Promise.all(folders.map(getPaths))
    // extract `.entries` from each response
    .then(responses =>
      responses.map(x => x.entries))
    // flatten array of entries arrays into a single array
    .then(arrOfEntries =>
      arrOfEntries.reduce((acc, entries) =>
        acc.concat(entries), []))
    // retain only entries where `.tag` is `'file'`
    .then(entries =>
      entries.filter(x => x['.tag'] === 'file'))
    // retrieve `path_lower` of resulting entries
    .then(entries =>
      entries.map(x => x.path_lower))
}

Answer 3

Answer №2

It seems that you are utilizing variables from the external scope (folderPaths and filePaths). While this may work, there could be better approaches to consider. One suggestion is to ensure that you return the promise from openFolders, allowing it to complete before moving on:

getPaths("/path").then(function() {
  return openFolders(folderPaths);
}).then(function() {
  console.log(filePaths);
});

Another recommendation would be to resolve the required information before proceeding with the next function call:

resolve(folderPaths);

And:

resolve(filePaths);

This way, your code structure could resemble something like this:

getPaths("/path").then(function(folderPaths) {
  return openFolders(folderPaths);
}).then(function(filePaths) {
  console.log(filePaths); 
});

Edit: Another potential issue pointed out by @naomik is that if db.getPaths operates asynchronously, the openFolders function might resolve before all asynchronous calls within the loop are completed. If this is the case, further adjustments may be necessary. Perhaps @naomik can provide a solution when available.

Answer 4

It seems that you are utilizing variables from the external scope (folderPaths and filePaths). While this may work, there could be better approaches to consider. One suggestion is to ensure that you return the promise from openFolders, allowing it to complete before moving on:

getPaths("/path").then(function() {
  return openFolders(folderPaths);
}).then(function() {
  console.log(filePaths);
});

Another recommendation would be to resolve the required information before proceeding with the next function call:

resolve(folderPaths);

And:

resolve(filePaths);

This way, your code structure could resemble something like this:

getPaths("/path").then(function(folderPaths) {
  return openFolders(folderPaths);
}).then(function(filePaths) {
  console.log(filePaths); 
});

Edit: Another potential issue pointed out by @naomik is that if db.getPaths operates asynchronously, the openFolders function might resolve before all asynchronous calls within the loop are completed. If this is the case, further adjustments may be necessary. Perhaps @naomik can provide a solution when available.

`I vow to never delay until the task is complete``

Answer №1

Answer №2

Similar questions

Trouble accessing Facebook Messenger through the integrated browser on Facebook network

"Utilizing the power of the Neo4j Driver in JavaScript to parse JSON

What is the best way to refresh a Windows 7 command prompt screen before executing a new function in Node.js?

Hovering over Ajax in jQuery does not trigger an update

How to Fetch JSON Data from a URL using JQuery AJAX?

Using ISO-8601 format to display dates in JSON within a .NET WebService

What is the best way to verify a v-if condition with an array in Vue.js HTML?

What is the most effective way to extract the output from a JSONP request and utilize it beyond the

What is the method for implementing conditions within a button element in Vue.js 2?

Tips for managing the react-bootstrap carousel using personalized buttons

Show image stored in Django database on React JS interface

the integration of shapes in three.js is malfunctioning

Angular form submission results in receiving an object instead of a simple value

What is the proper way to implement parameters and dependency injection within a service?

"Repeatedly encountering 'undefined' when subscribing to the selected option of a select list in Knockout.js

Vue Router configuration functions properly when accessed through URL directly

Am I on the right track with my service definition in Angular?

How to use an Angular filter to extract boolean values from an API response?

Having Trouble Creating the production APK in React Native

Difficulties in rendering the JSON data retrieved from a server