'this'在類成員上返回未定義

Question

當我實例化此類時，調用init()函數時，我得到的是未定義的。 但是在emit('updateRoomsRequest')回調內部，我可以控制台記錄this.roomsData並查看通過套接字連接接收的值。

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
}
}

這是實例化：

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

它關於執行順序。 A行在B行之前執行：

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

return this.roomsData; // LINE A

因此在LINE A中未定義。

固定

使用回調或Promise或Observable鏈接您的異步代碼🌹