How do I return a value returned by a function using a promise?

Question

I am creating a Vue.js component that returns the html code using the render () method. The structure of the render () method is the one shown in the code.

render: function (h, context) {
   // Element returned by the render function
   var element;

    // .... code that performs initializations

   // The invocation of a promise that downloads a json file
   var promise = loadJsonFile (pathFile);

   promise.then (
       // on success
       function (jsonFile) {
         // ... here is some code that builds an element as 
         // a function of json file contents
         element = buildComponent (jsonFile, h, context);
       },

       // on error
       function (error) {
          console.log(error);
       }
   );

    // Then the variable element returns "nothing"
    return (element);
}

How do I return the constructed "element" object or, in alternative, can I "wait" for the execution of the "function (jsonFile)" block before I return it?

Answer 1

Try returning the element from buildComponent and using another then method to wait for the result:

render: function (h, context) {
   // Element returned by the render function
   var element;

    // .... code that performs initializations

   // The invocation of a promise that downloads a json file
   var promise = loadJsonFile (pathFile);

   promise.then (
       // on success
       function (jsonFile) {
         // ... here is some code that builds an element as 
         // a function of json file contents
         // return the result of 'buildComponent', throwing another promise
         //     which can be caught with another then statement below
         return buildComponent (jsonFile, h, context);
       },

       // on error
       function (error) {
          console.log(error);
       }
   )
   .then(function(element) {
      // do things with 'element'
   })
   // catch any massive explosions (errors)
   .catch(function(error) { console.log(error); });
}