为什么使用 Promises 时不保留对象状态？答案

【问题标题】：Why is object state not preserved when using Promises?为什么使用 Promises 时不保留对象状态？
【发布时间】：2021-05-09 21:00:31
【问题描述】：

考虑以下代码sn-p：

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());
})();

执行时，第 48 行 (console.log(await wrapper.isConnected())) 打印 true。

现在，我将ClientWrapper connect() 方法修改为：

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

，删除return。

现在，第 48 行打印出false。

为什么Client 类的connected 属性不保留true 值？既然connect 方法返回Promise<void>，为什么return 语句很重要？

谢谢！

【问题讨论】：

"既然 connect 方法返回 Promise，为什么 return 语句很重要？" - 因为return this.client.connect(); 和this.client.connect(); return Promise.resolve(undefined); 之间存在巨大差异！请注意，Promise<void> 与 void 不同。

标签： javascript typescript async-await promise es6-promise

【解决方案1】：

这里的问题是您在没有await 的情况下调用Client.connect()。因此，异步函数Clinet.connect() 在函数ClientWrapper.connect() 已经结束时执行。在调用中添加await：

await this.client.connect();

然后它将按预期工作

【讨论】：

【解决方案2】：

当你从异步函数返回一个 Promise 时，它将被折叠到从异步函数返回的整个 Promise 中。

因此，当您等待wrapper.connect 调用时，您正在等待内部this.client.connect 调用。

当您删除返回时，您正在等待 wrapper.connect 调用，但它与内部 this.client.connect 调用不同步。它基本上是函数内部的一劳永逸。

您也可以使用 await this.client.connect() 代替 return 并且行为将相同并且更有意义。

【讨论】：