roslibjs How to access response outside function callback?

edit

I am having a hard time using the callService method from ROSLIB.Service. I am trying to access the response parameter from outside the callService function but it turns out as undefined. I tried using await and async to get it out if the function call but it did not work.

class RobotState{

    constructor()
    {
        this.CurrentState = RobotStatus.Standby;
        this.ros = new ROSLIB.Ros();
        this.managerSetStateClient = new ROSLIB.Service({
            ros : this.ros,  //here we put the desired ROSLIB.Ros object. 
            name : '/tx_manager/SetState', //here we add the desired name of the 
            serviceType : 'tx_service_manager/set_state'
        });

        this.getWiFiListClient = new ROSLIB.Service({
            ros : this.ros,
            name : '/network/GetWifiList',
            serviceType : 'tx_service_manager/get_wifi_list'
        });

   }

    get status() {
        return this.CurrentState
    }

    set status(state) {
        this.CurrentState = state
    }

    connect()
    {
        console.log("Starting Connection ...")
        // Connecting to ROS
        // -----------------
        // If there is an error on the backend, an 'error' emit will be emitted.
        this.ros.on('error', function(error) {
            document.getElementById('connecting').style.display = 'none';
            document.getElementById('connected').style.display = 'none';
            document.getElementById('closed').style.display = 'none';
            document.getElementById('error').style.display = 'inline';
            console.log(error);
        });
        // Find out exactly when we made a connection.
        this.ros.on('connection', function() {
            console.log('Connection made!');
            document.getElementById('connecting').style.display = 'none';
            document.getElementById('error').style.display = 'none';
            document.getElementById('closed').style.display = 'none';
            document.getElementById('connected').style.display = 'inline';
        });
        this.ros.on('close', function() {
            console.log('Connection closed.');
            document.getElementById('connecting').style.display = 'none';
            document.getElementById('connected').style.display = 'none';
            document.getElementById('closed').style.display = 'inline';
        });
        // Create a connection to the rosbridge WebSocket server.
        this.ros.connect('ws://localhost:9090');
    }

    getWifiNetworks()
    {
        console.log("Getting Networks")
        var request = new ROSLIB.ServiceRequest({});
        var network = "Foo" 
        console.log(network); //prints "Foo"
        this.getWiFiListClient.callService(request, function(response)
        {
            console.log(response.ssid[0]); 
            network = response.ssid[0];  
            console.log(network);  //prints "Bar"         
        });
       console.log(network); //prints undefined.
    }
}

I would like to know how do assign values to member variables of my class from the response of the service call.

Thanks in advance!