Having an extremely difficult time understanding how to return a value to the parent function from a promise chain

Question

I am coming at this question from a standpoint of having an extremely minimal understanding of the subject matter and I am trying to figure out and understand what is happening.

I read through the article at How do I return the response from an asynchronous call? but I cannot understand it.

However, based on my read, it would seem that the section entitled "If you're not using jQuery in your code, this answer is for you" is the section that deals with the structure I am using. However because the material referenced in the example is so different from mine, I simply cannot follow or understand it enough to be able to effectively apply it to my code.

I also read through a lot of the other articles about returning values from promise chains, but I cannot fully follow or understand them either due to my pre-beginner level status in terms of asynchronous javascript and promises.

I am hoping someone can explain in the simplest of ways and help me understand how to apply the material in the section entitled "If you're not using jQuery in your code, this answer is for you" from How do I return the response from an asynchronous call? to my code.

I have a function and inside of the function there is an asynchronous piece of javascript.

I updated my code to this:

function LF(action, key, value){
  var ectcb = localforage.createInstance({name: "ectcb"});
    return ectcb.defineDriver(window.cordovaSQLiteDriver).then(function() {
    return ectcb.setDriver([
    window.cordovaSQLiteDriver._driver,
    ectcb.INDEXEDDB,
    ectcb.WEBSQL,
    ectcb.LOCALSTORAGE
    ]);
      }).then(function() {
        if (ectcb.driver().toString() = 'cordovaSQLiteDriver'){
          if (action = 'save'){ectcb.setItem(key, value); return true;} 
          else if (action = 'load'){ectcb.getItem(key, value); return true;}
          else {return false;}
          }
        else {return false;}
      }).catch(function(err) {
        return false;     
      });
    };

It was originally the code directly below

function LF(action, key, value) {
  var ectcb = localforage.createInstance({
    name: "ectcb"
  });
  var thePromiseResult = ectcb.defineDriver(window.cordovaSQLiteDriver).then(function() {
    return ectcb.setDriver([
      window.cordovaSQLiteDriver._driver,
      ectcb.INDEXEDDB,
      ectcb.WEBSQL,
      ectcb.LOCALSTORAGE
    ]);
  }).then(function() {
    if (ectcb.driver().toString() = 'cordovaSQLiteDriver') {
      if (action = 'save') {
        return ectcb.setItem(key, value);
      } else if (action = 'load') {
        return ectcb.getItem(key, value);
      } else {
        thePromiseResult = 1;
      }
    } else {
      thePromiseResult = 1;
    }
  }).catch(function(err) {});

  if (thePromiseResult = 1) {
    return false;
  } else {
    return true;
  }
};

I have a variable named thePromiseResult set to the async code.

I am trying to comprehend how I can cause a specific value to be set to thePromiseResult based on the if/else logic shown within the code.

Ultimately, something will be calling LF('save','thekey','the value') and I need to return to that "something" the value of true or false.

I am hoping someone can explain how i can alter this code to achieve what I need to do, and explain it in a very simple for-dummies way so I can truly understand what is happening.

I think that setting "thePromiseResult = 1" inside the .then is probably not setting it globally and just setting it inside the .then with the desired value.

I tried to look at the other posts on this topic and I cannot grasp the concepts using the various examples they show.

My goal is to have code on a different page that says

var result = LF('fake','myKey','myValue')

if (result = false){alert("Operation Failed");
else if (result = true){alert("Operation Successful");  

I am trying to break the code up so that it mirrors what is being done under 2. Restructure code where it talks about letting your function accept a call back. However, because the code used in that example is so different than what I have, I am just not knowledgeable enough to follow what is being described.

I am hoping someone can take a kindergarten coder approach to help me translate the concepts so that it is more clear how it can be applied to my code.

Answer 1

If I understand your question, it seems like you are trying to make your promise return a non-promise result. Let's say:

// you want "result" to be 2 here
var result = somePromise
  .then(asyncTwo => asyncTwo) // lets say the promise resolved with 2

result // still a promise, but you want it to be 2

This is a misunderstanding of how and why promises are used. When dealing with asynchronous code, the callbacks always resolve after your synchronous code has executed. This means that result can never be set to 2 where you want it to be.

This might help drive the point home:

console.log('synchronous code start')
var result

var somePromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(2)
  }, 0)
})

somePromise.then(asyncTwo => {
  console.log('somePromise resolves with 2')
  result = asyncTwo // set result to two
})

console.log('this code is synchronous so result still equals ', result)

setTimeout(() => {
  console.log('sometime later result may equal ', result)
  console.log('but your synchronous code has already finished so this is unhelpful!') 
}, 500)

console.log('synchronous code finished')

The answer is to embrace the Promise pattern so you can deal with asynchronous code in a logical way. Instead of trying to lift your asynchronous result into your synchronous code (which is not possible by the way), chain additional then / catch to apply additional logic to the async result.

// lets mock out an example of what you might get:

function asyncOneOrTwo () {
  // one or two randomly
  let oneOrTwo = Math.floor(Math.random() * 2) + 1
  return Promise.resolve(oneOrTwo)
}

function LF () {
  return asyncOneOrTwo()
    .then(oneOrTwo => {
      // you can reject with an error message instead if that's your preference
      if (oneOrTwo === 1) return Promise.reject(oneOrTwo)
      else return Promise.resolve(oneOrTwo)
    })
}

// in another file
// chain `then` or `catch` to do additional error handling
LF()
  .then(res => {
    console.log('success we got: ', res)
  })
  .catch(err => {
    console.log('fail we got: ', err)
  })