在 TypeScript 中链接 Promise 时如何避免 .then 或重复等待？

Question

我编写了一些代码来包装 Playwright

Page

以简化一些操作。 在我的一项操作中，我想做一些类似打字和 Tab 键操作的操作（这可以更好地模拟用户行为，即使 Playwright 速度较慢，因此主要是为了测试 Tab 键顺序是否按预期工作）。

要包装的类将是这样的：

import { Locator, Page } from "@playwright/test";
class SimplePage {
  constructor(private readonly page: Page) {}
  async type(text: string): Promise<this> {
    await this.page.keyboard.type(text);
    return this;
  }
  async tab(): Promise<this> {
    await this.page.keyboard.press("Tab");
    return this;
  }  
}

目前我可以在代码中使用它的唯一方法如下：

await myPage.type(programName)
  .then((p) => p.tab())
  .then((p) => p.type(shortName))
  .then((p) => p.tab());

或

await myPage.type(programName);
await myPage.tab();
await myPage.type(shortName);
await myPage.tab();

我想知道是否有办法构建它，以便以下内容可以工作

await myPage
  .type(programName)
  .tab()
  .type(shortName)
  .tab();

Answer 1

您可以为您的

SimplePage

类提供

promise

属性，并在每次调用

tab

或

text

时，用新的链式承诺替换该承诺。

最后，通过定义

SimplePage

方法，使

then

成为 thenable。这样它就会按预期响应

await

运算符：

class SimplePage {
  private promise: Promise<void>;

  constructor(private readonly page: Page) {
    this.promise = Promise.resolve();
  }

  type(text: string): SimplePage {
    this.promise = this.promise.then(() => this.page.keyboard.type(text));
    return this;
  }

  tab(): SimplePage {
    this.promise = this.promise.then(() => this.page.keyboard.press("Tab"));
    return this;
  }

  then(onFulfill: (value: any) => void, onReject: (error: any) => void) {
    return this.promise.then(onFulfill, onReject);
  }
}