Confusing asynchronous operations for client.db.get(..)

Saif · June 24, 2021, 4:21pm

For the followers of this thread…

Here’s our best understanding.

We had two JS functions invoked one by one in the same execution context – ABC(..) and XYZ(..)
Both ABC(..) and XYZ(..) had methods when invoked will return promises.
ABC(..) has client.db.get(..) which can be either fulfilled F1 or rejectedR1.
XYZ(..) returns a promise to either fulfill F2 or rejectedR2.
Javascript queues F1, F2 in a microtask queue. Both callbacks F1 and F2 will be invoked only when they are fulfilled. If JS encounters R1 during execution, JS will realize promise is rejected, and the thread of execution will move to the nearest .catch(..).
In the current situation, app has expected ABC(..) -> XYZ(..) -> R1 -> F2 to happen. But JS as it should, ABC(..) -> XYZ(..) -> R1 -> .catch(..) and exits. The catch wasn’t defined so JS silently exits.
We solved this problem forcing ABC(..) -> XYZ(..) -> F1 -> F2 -> if err -> .catch(..) to happen.

Here,
ABC(..) is updateEnvelopTicket(..)
XYZ(..) is updateEnvelopsDocusignAll(..)

Here is the sample we shared with the developer to do #7,

On another topic

hey @JulienN @hchoura,

Here is a sample that we promised yesterday,

app.js

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') renderApp();

  function renderApp() {
    var onInit = app.initialized();

    onInit
      .then(function getClient(_client) {
        window.client = _client;
        client.events.on('app.activated', renderContactName);
      })
      .catch(handleErr);
  }
};

function renderContactName() {
  document.getElementById('start').addEventListener('click', init)
}

function init() {
  getDb().then(function (data) {

    console.log('result of getDb()', data);
    return addOneToList();

  }).then(function (data) {

    console.log('Result of addOneToList()', data);
    return getDb();

  }).then(function (data) {

    console.log('result after adding one to the list', data);
    console.log('removing from the list removeFromList');
    return removeFromList();

  }).then(function (data) {

    console.log('Removing value from the list', data);

  }).catch(function (error) {
    console.error('Error', error);
    if (error.status === 404) {
      client.db.set("set_db", { "names": ["James Bond", "Rocky Balboa",] })
      init();
    }
  })
}

function getDb() {
  return client.db.get("set_db")
}


function addOneToList() {
  return client.db.update("set_db", "append", { "names": ["Jason Bourne"] })
}

function removeFromList() {
  return client.db.update("set_db", "remove", ["names"])
}

function handleErr(err = 'None') {
  console.error(`Error occured. Details:`, err);
}

Note: the above code snippet is long and has a scroll bar, please scroll down on the code snippet to view the complete code
index.html

<html>
  <head>
    <script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
  </head>

  <body>
    <section class="app-body">
        <button id="start">Click me</button>
    </section>
  </body>
  <script src="scripts/app.js"></script>
</html>

Output:-

Kindly try this and let us know if it works or if you need any help!

Stay safe

This topic will automatically close in 3 days.
For any new questions we request to either create a new topic
If you are this topic creator – we already have private thread where you can ask further questions.