How to pass Ajax promise data to a template page V6

Here is my route.js code trying to pass ajax promise data to the template. I get a blank template when I run pass data via ajax( See var user;). However, the template populate with data when i use var userx. The console log shows both variable user and userx are identical.

If i could get a code to pass data into my template via ajax promise i will be very grateful.

//using core script 
  {
    path: '/request-and-load/user/:userId/',
    async: function ({ router, to, resolve }) {
      // App instance
      var app = router.app;

      // Show Preloader
      app.preloader.show();

      // User ID from request
      var userId = to.params.userId;

      // Simulate Ajax Request
//      setTimeout(function () {
        // We got user data from request
        
       var user= app.request.json('./config/app.php')
          .then(function (res) {
            console.log(res.data);
             return res.data;
             //res.data =userx
          });        

        var userx = {
          'firstName': 'Bruno',
          'lastName': 'Jackowski',
          'about': 'Hello, i am creator of saa na ete3! Hope you like it!'
          
        };
        console.log(userx);
        // Hide Preloader
        app.preloader.hide();

        // Resolve route to load page
        resolve(
          {
            componentUrl: './pages/request-and-load.html',
          },
          {
            props: {
              user: user,
            }
          }
        );
//      }, 1000);
    },
  },

Any assistance will be appreciated!

var user= app.request.json('./config/app.php')

var user= await app.request.json('./config/app.php')