Implement a new method called "defer" to an array that will be resolved at a later time using Promise.all()

Question

Implement a new method called "defer" to an array that will be resolved at a later time using Promise.all()

I need to manage a queue of DB calls that will be executed only once the connection is established. The DB object is created and stored as a member of the module upon connection.

DB Module:

var db = {
  localDb: null,
  connectLocal: (dbName) => {
    // Do stuff
    this.localDb = new PouchDB(dbName) // has an allDocs() method
  }
}

Adding calls to the queue:

var dbQueue = []

function getDocs () {
  dbQueue.push (
    db.localDb.allDocs () // allDocs() not yet defined; returns a promise
  )
}

// Will be called once connected and the queue is not empty:
function processQueue () {
  Promise.all (dbQueue)
  .then(...)
}

If getDocs() is invoked before db.connectLocal() sets db.localDb, then an error similar to the following may occur because db.localDb is not yet defined:

TypeError: Cannot read property 'then' of undefined

Is it possible to add an undefined method that returns a promise to an array for later resolution using Promise.all()? Any other suggestions on how I can tackle this problem?

Additionally, I am utilizing Vue.js and PouchDB in this scenario.

javascript asynchronous vue.js promise pouchdb

Answer 1

Answer №1

To ensure a more efficient code structure, consider implementing a promise within your database module rather than solely relying on the localDb property:

let localDatabase = null;
let resolveLocalDatabase = null;
let localDatabasePromise = new Promise(function(resolve, reject) {
    resolveLocalDatabase = resolve;
});

var dbModule = {
  getLocalDatabase: () {
    return localDatabasePromise;
  }
  establishLocalConnection: (databaseName) => {
    // Perform necessary operations
    localDatabase = new PouchDB(databaseName); // contains an allDocs() method
    resolveLocalDatabase(localDatabase);
  }
}

Subsequently, replace instances of .localDb with getLocalDatabase(), which will retrieve a promise.

dbQueue.push(
  dbModule.getLocalDatabase().then(db => db.allDocs())
)

Answer 2

To ensure a more efficient code structure, consider implementing a promise within your database module rather than solely relying on the localDb property:

let localDatabase = null;
let resolveLocalDatabase = null;
let localDatabasePromise = new Promise(function(resolve, reject) {
    resolveLocalDatabase = resolve;
});

var dbModule = {
  getLocalDatabase: () {
    return localDatabasePromise;
  }
  establishLocalConnection: (databaseName) => {
    // Perform necessary operations
    localDatabase = new PouchDB(databaseName); // contains an allDocs() method
    resolveLocalDatabase(localDatabase);
  }
}

Subsequently, replace instances of .localDb with getLocalDatabase(), which will retrieve a promise.

dbQueue.push(
  dbModule.getLocalDatabase().then(db => db.allDocs())
)

Answer 3

Answer №2

I encountered a solution to my queue problem, and it was quite different from what I initially attempted.

The mistake I made was assuming that Promise.all() postpones the execution of my methods until called, but in reality, they are executed when added to the array. This led to the error mentioned earlier in my question. Therefore, I had to reconsider how to populate the queue with methods that may not be defined yet.

The workaround involved adding method calls as strings (e.g., "getDocs") to an array (the queue), then iterating through the array to invoke the methods using bracket notation (e.g., db["getDocs"]()).

Although my application is built with Vue.js, here is a basic, functional illustration:

// Placeholder DB object
var db = {
  docs: [1, 2, 3]
};

// Queue for storing DB operations
var dbQueue = [];

// Processing the queue - triggered elsewhere after establishing a connection with the DB
// The processed array and Promise.all() may not be essential, but I prefer logging results sequentially
async function processQueue() {
  var processed = []; // Methods invoked from the queue

  // Adding valid methods to the processing array
  dbQueue.forEach(method => {
    if (typeof db[method] === "function") {
      return processed.push(db[method]());
    } else {
      console.error(`"${method}" is not a valid method name.`);
    }
  });

    // Logging promise results
  await Promise.all(processed).then(res => {
    console.log("Processed:", res);
  });

  // Clearing the queue
  dbQueue = [];
}

// Including some method calls in the queue even though the methods do not exist yet
dbQueue.push("getDocs");
dbQueue.push("getDocs");

// Simulating the addition of a method
db.getDocs = function() {
  return new Promise(resolve => {
    resolve(this.docs);
  });
};

// Executing the queue once the necessary conditions are met (such as connecting to the DB); triggered elsewhere
processQueue();

For those interested, here's a fiddle demonstrating an example allowing arguments for the methods: https://jsfiddle.net/rjbv0284/1/

Answer 4

I encountered a solution to my queue problem, and it was quite different from what I initially attempted.

The mistake I made was assuming that Promise.all() postpones the execution of my methods until called, but in reality, they are executed when added to the array. This led to the error mentioned earlier in my question. Therefore, I had to reconsider how to populate the queue with methods that may not be defined yet.

The workaround involved adding method calls as strings (e.g., "getDocs") to an array (the queue), then iterating through the array to invoke the methods using bracket notation (e.g., db["getDocs"]()).

Although my application is built with Vue.js, here is a basic, functional illustration:

// Placeholder DB object
var db = {
  docs: [1, 2, 3]
};

// Queue for storing DB operations
var dbQueue = [];

// Processing the queue - triggered elsewhere after establishing a connection with the DB
// The processed array and Promise.all() may not be essential, but I prefer logging results sequentially
async function processQueue() {
  var processed = []; // Methods invoked from the queue

  // Adding valid methods to the processing array
  dbQueue.forEach(method => {
    if (typeof db[method] === "function") {
      return processed.push(db[method]());
    } else {
      console.error(`"${method}" is not a valid method name.`);
    }
  });

    // Logging promise results
  await Promise.all(processed).then(res => {
    console.log("Processed:", res);
  });

  // Clearing the queue
  dbQueue = [];
}

// Including some method calls in the queue even though the methods do not exist yet
dbQueue.push("getDocs");
dbQueue.push("getDocs");

// Simulating the addition of a method
db.getDocs = function() {
  return new Promise(resolve => {
    resolve(this.docs);
  });
};

// Executing the queue once the necessary conditions are met (such as connecting to the DB); triggered elsewhere
processQueue();

For those interested, here's a fiddle demonstrating an example allowing arguments for the methods: https://jsfiddle.net/rjbv0284/1/

Implement a new method called "defer" to an array that will be resolved at a later time using Promise.all()

Answer №1

Answer №2

Similar questions

Show or hide the expand/collapse button based on the height of the container

What could be causing the issue when attempting to run "npm run serve"?

Centered on the screen are the input field and corresponding label

ReactJS with conditional closing tags

The function Router.use is looking for a middleware function, but instead received an object in node.js /

Problems during the installation of Webpack

When using vue-router push, the first page should not be concealed even if the data array is extensive

Error in Next.js: react-dom.development.js?ac89:14906 - Hook call is invalid. Hooks should only be used within a function component's body

creating a distinct angular service for every controller

Browsing HTML Documents with the Click of a Button

What is the best way to animate specific table data within a table row using ng-animate?

Embedding a table inside a Bootstrap popover

Exploring the seamless integration of the Material UI Link component alongside the Next.JS Link Component

Struggling to pass command line arguments to index.ts with yarn?

Having trouble with the filtering feature in Material UI Datagrid

Can two Angular element components be utilized simultaneously on a single page in Angular 6?

increasing the efficiency of exporting large amounts of data in Laravel to prevent timeout errors

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

Using Node.js to display the outcome of an SQL query

Display radio buttons depending on the selections made in the dropdown menu