为什么使用 Promise 时没有保留 object state？

Question

Consider the following code snippet:

class ClientWrapper {
    private client: Client;

    constructor() {
        this.client = new Client();
    }

    async connect() : Promise<void> {
        return this.client.connect();
    }

    async isConnected(): Promise<boolean> {
        return this.client.isConnected();
    }
};

class Client {
    private data?: string;

    private connected: boolean;

    constructor() {
        this.connected = false;
    }

    isConnected(): boolean {
        return this.connected;
    }
    
    async connect() : Promise<void> {
        this.data = 'data';
        const res = await this.executeRequest();
        this.connected = true;
    }

    async executeRequest() : Promise<string> {
        return await Promise.resolve(this.data!);
    }
};

let wrapper = new ClientWrapper();
(async () => {
    await wrapper.connect();
    console.log(await wrapper.isConnected());
})();

When executed, line 48 ( console.log(await wrapper.isConnected()) ) prints true .

Now, I modify ClientWrapper connect() method to:

async connect() : Promise<void> {
    this.client.connect();
}

, removing the return .

Now, line 48 prints false .

Why does the connected property of class Client not preserve the true value? Since the connect method returns Promise<void> , why does the return statement matter?

Thank you!

Answer 1

The issue here is that you call Client.connect() without an await . Therefore, the async function Clinet.connect() is executed while the function ClientWrapper.connect() has already ended. Add await to the invoke:

await this.client.connect();

then it will work as expected

Answer 2

When you return a Promise from an async function, it will be folded into the overall Promise returned from the async function.

So when you awaited the wrapper.connect call you were awaiting the inner this.client.connect call.

When you removed the return you were awaiting the wrapper.connect call but it was not synchronised with the inner this.client.connect call. It was basically fire and forget inside the function.

You could also use await this.client.connect() instead of the return and the behaviour would be the same and makes more sense.