NativeScript http.getJSON and async await

Question

I have problems with processing return after promise in my NativeScript app. Return get executed before http.getJSON gets data. It's just skip the return unchanged (status) variable. I have tried to use await but that did not work or I did not use it correctly. Here is my code

const check = {  
CheckLenght: function(id) { 
    var status = false; 
    var response = checkPoints(id); 

    if(response > 10){
        status true;
    } else {
        status false;
    } 

    console.log("This is response: " + status); // this shows up before getJSON is returned as "This is response: false"

    return status;  // always returns false
 }  
} 


function checkPoints(id){
    let points; 
    http.getJSON('MY_API_URL' + id)
   .then(function (response) {  
        points = response[0].point; 
   }, function(error) {
       console.log("Server err."); 
   }) 

 console.log("This output shows up before - This is response: false ");
 return points;  
} 

Is there a way to get this working? I tried with Observable but that did not work ether.

UPDATE:

Here is code from where I make a call to CheckLenght: function(id) using var resp = ProvjeraBarcode.CheckLenght(result.text); and it returns [object Promise]

function skeniraj(){ 
barcodescanner.scan({
    formats: "QR_CODE, EAN_13",    
    cancelLabel: "Odustani. Probajte Volume tipke",  
    closeCallback: function () { console.log("Scanner closed"); },  
    openSettingsIfPermissionWasPreviouslyDenied: true  
  }).then(
      function(result) {
        console.log("Scan format: " + result.format);
        console.log("Scan text:   " + result.text);  

//#########################            

      var resp = ProvjeraBarcode.CheckLenght(result.text);

//########################## 

       console.log("Show response: "+JSON.stringify(resp)); 
       // output is: "[object Promise]"


        if(resp === "true"){ 
            // if true... 
                setTimeout(func, 50);
                function func() {
                    dialogs.confirm({
                        title: "Kartica je valjana",
                        message: "Pohranite karticu u memoriju?",
                        okButtonText: "Pohrani",
                        cancelButtonText: "Odustani", 
                    }).then(function (response) { 
                        console.log("Dialog result: " + response);
                        if(response){  
                        // save details to storage...

                        } 
                    });
                } 

            } else {
                // .... do something else...
            } 
      },
      function(error) {
        console.log("Nista nije skenirano Err. " + error);
        // pokreni rucni unos
        setTimeout(rucniUnos, 50); 
      }
  ); 
 }

I'm having hard times with this. Thanks for all help and support

Answer 1

Look at your code this way:

function checkPoints(id){

  let points;
  // make a new variable, nothing is assigned so give it undefined

  http.getJSON('MY_API_URL' + id).then(...)
  // Promise? handle later, go to next line.

  return points;
  // return undefined
} 

Points will always be undefined. You assign point inside of http.getJSON's then, so actually even if that function was synchronous, point of the outer scope would still be undefined. Edit You wouldn’t had used then if the function were synchronous & point would had been modified, my bad!

You can change your code so that checkPoints() returns a Promise, which ensure you the data has been returned.

function checkPoints(id){
  return http.getJSON('MY_API_URL' + id).then(
    function (response) {  
      return response[0].point;  <-- return the response[0].point
    },
    function(error) {
      console.log("Server err."); 
    })
}

or with arrow function

const checkPoints = (id) => http.getJSON(`MY_API_URL${id}`)
  .then(response => response[0].point)
  .catch(error => console.log("Server err."))

And in your function you can use async / await:

...
//             V checkLengtht has to be an async function, otherwise it can't use await
CheckLenght: async function(id) { 
  var status = false;
  var response = await checkPoints(id);
      if(response > 10){
        status true;
    } else {
        status false;
    }
  return status;
}

You can rewrite your code like this:

CheckLenght: async function(id) { 
  const points = await checkPoints(id);
  return (points > 10) // return true if points > 10, else return false. Note that this function's return will be wrapped in Promise.
}

Note that CheckLength's is now an async function, meaning it returns Promise; when you use it, you have to use await or .then().

You can also do away with async/await entirely:

...
CheckLenght: id => checkPoints(id).then(points => points > 10);

---

How to use async/await

Appending async in front of function declaration makes it returns a Promise.

const add = (a, b) => a + b
add(1, 2) // 3

const add = async (a, b) => a + b
add(1, 2) // Promise(...)
add(1, 2).then(res => console.log(res)) // 3

await can be used inside an async function to retrive response of a Promise.

const main = async () => {
  const res = await add(1, 2)
  console.log(res)
}

main() // 3