Commands Queries设计模式提高Angular应用性能及可维护性

作者：袖梨 2026-06-10

基本概念

命令 (Commands)

命令代表了一项能够改变系统状态的操作，通常通过向后端发起REST调用来实现。每个命令都可以返回一个结果，并在执行时考虑执行策略。每次命令执行都会返回一个Observable，它会在命令执行完成后发出（可选的成功结果），然后完成，或者在命令执行导致错误时抛出错误。

重要的是要注意，订阅结果Observable并不会触发命令的执行，这是可选的。

命令可以通过将CommandService.create工厂方法的调用结果存储为类的属性来定义。一个命令通常包括以下参数：

调度命令的函数（通常是调用连接器的函数）。
选项对象（通常用于指定执行策略）。

以下是一个示例：

protected updateCommand: Command<{ details: User }> = this.command.create(
  (payload) =>
    this.userIdService.takeUserId(true).pipe(
      switchMap((uid) =>
        this.userProfileConnector.update(uid, payload.details)
      ),
  {
    strategy: CommandStrategy.Queue,
  }
);

查询 (Queries)

与命令不同，查询是一种不改变系统状态的操作，它用于从系统中检索数据而不会对其进行修改。通常，查询返回一个Observable，它发出数据并完成，供订阅者使用。与命令一样，查询也可以定义执行策略。

执行策略

命令和查询的执行可以根据执行策略进行控制，以下是一些常见的执行策略：

Parallel（并行）：执行所有命令或查询并行进行，不考虑它们的顺序。
Queue（队列）：命令或查询按照它们的调用顺序排队执行，这是默认的执行策略。
CancelPrevious（取消上一个）：如果一个命令或查询尚未完成执行，新的执行将开始，并且会取消上一个执行。上一个执行的结果流将完成而不发出值。
ErrorPrevious（上一个错误）：如果一个命令或查询尚未完成执行，新的执行将开始，并且会为上一个执行引发错误。上一个执行的结果流将抛出错误。

实际示例

为了更好地理解Commands and Queries设计模式，让我们通过一个实际的示例来演示其应用。假设我们正在开发一个用户管理系统，我们需要创建一个命令来更新用户的详细信息。

首先，我们定义一个命令来执行用户详细信息的更新：

protected updateCommand: Command<{ details: User }> = this.command.create(
  (payload) =>
    this.userIdService.takeUserId(true).pipe(
      switchMap((uid) =>
        this.userProfileConnector.update(uid, payload.details)
      ),
  {
    strategy: CommandStrategy.Queue,
  }
);

在这个示例中，updateCommand是一个命令，它会接收用户的详细信息并将其发送到后端。我们选择了执行策略为队列，这意味着如果有多个更新请求，它们将按顺序执行，以确保数据的一致性。

现在，让我们考虑一个查询的示例。假设我们需要获取用户的个人资料：

protected getUserProfileQuery: Query<{ userId: string }, UserProfile> = this.query.create(
  (payload) => this.userProfileConnector.getProfile(payload.userId),
  {
    strategy: QueryStrategy.Parallel,
  }
);

这个查询 getUserProfileQuery 接受用户ID作为输入，并从后端获取用户的个人资料。在这里，我们选择了执行策略为并行，这意味着我们可以同时获取多个用户的资料，以提高性能。