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

Utilize mouseover to rotate the camera in three.js

ReactJS is giving me an error message: "Uncaught TypeError: Unable to access property 'ownerDocument' since it is null."

Tips for inserting items into an array of objects?

Is there a way to manipulate text in JQuery without altering the inner element?

What is the reason javascript struggles to locate and replace strings with spaces in a URL?

HTML background image not displaying in JSPDF addHTML function

Can dynamic attributes be used with ternary operators in Angular?

Enter key triggering input change event is unresponsive in Internet Explorer

Encountering a call stack size error when utilizing Vue-Resource within a Vuex store

When anchor is set programmatically, the focus outline is not displayed

Is there a way to automatically populate an AngularJS input field?

Stepping up Your Next.js Game with the Razorpay Payment Button Integration

The code snippet for the React TypeScript Cheatsheet in the Portal sample appears to be malfunction

Any methods for integrating js.erb files in Ruby on Rails 7?

Challenges encountered when using setState to assign values

Fill in the select dropdown menu

Creating a compact pivot grid using Vue.js without relying on any external libraries

What is the best way to extract "true" values from an array and store them in a new array during iteration?

Run the js.erb code only when a certain condition is met

To prevent DOM errors in Vue-bootstrap and Nuxt.js, it is recommended to utilize the <b-dropdown> element within the <b-collapse> component