'this'在类成员上返回未定义

Question

When I instantiate this class, upon calling the init() function, I'm getting an undefined. But inside emit('updateRoomsRequest') callback, I'm able to console log this.roomsData and see the values received through the socket connection.

export class LoginService {
    roomsData: string[];
constructor(private socket: Socket) {}

init(connect: string): string[]{
    this.socket.on(connect, () => {
        this.socket.emit('updateRoomsRequest', {}, (data: string[]) => {
            this.roomsData = data;
            console.log(this.roomsData); //this is logging data correctly
        });
    });

    return this.roomsData; //this is returning undefined
}
}

this is the instantiation :

export class LoginComponent implements OnInit {
    rooms: string[];
    constructor(private LoginPageService: LoginService) {}

    ngOnInit() {
        this.rooms = this.LoginPageService.init('connect');
        console.log(this.rooms); //undefined as well
    }

    }

Answer 1

Its about the order of execution. Line A executes before Line B:

this.socket.on(connect, () => {
    this.socket.emit('updateRoomsRequest', {}, (data: string[]) => {
        this.roomsData = data; // LINE B
    });
});

return this.roomsData; // LINE A

And therefore it is undefined at LINE A.

FIX

Use callbacks, or promises or observables to chain your async code 🌹