Question

我有一个简单的情况，一个用于获取UserList的端点，该端点返回每个用户的基本信息，第二个端点获取每个用户的详细信息。

我当前用于获取所有信息的算法很简单，但这并不是最佳选择。

getUsers() {
  this.apiService.getUsers()
    .subscribe((users) => {
      this.users = users;
      this.users.forEach((user) => {
        this.apiService.getUserDetail(user.id)
          .subscribe((details) => {
            user.details = details;
          });
      });
    });
}

我该如何做得更好？

Answer 1

第一步是问，对于这样的列表，理想的UX是什么？理想情况下，用户应该看到项目列表，其中包含有关列表中每个项目的一些基本详细信息。而且，当用户单击列表中的某个项目时，应将其导航到包含列表中该项目详细信息的视图。

您的API是为同一UX设计的。这就是为什么它最初返回该项目的基本详细信息的原因。然后还有另一个端点，您可以点击该条目的ID以获取该条目的详细信息。

因此，要显示用户列表，您只需从getUsers()方法返回用户列表即可。而且，当从列表中单击用户时，您可以将视图更改为“用户详细信息”视图，该视图将具有一个www.your-domain.com/users/1行的URL。 1这里是userId。现在，您可以通过将ActivatedRoute作为依赖项注入UserDetailsComponent中来获取userId。在这里，您可以调用APIService的{{1}}方法，并将您获得的userId传递给该方法。一旦获得用户详细信息，就可以用它们填充视图。

您应该始终考虑仅在需要数据时才进行ajax调用来延迟加载数据，而不是在应用程序加载时获取所有数据。这样可以带来更好的用户体验。

如何重构从端点再次获取数据以重新接收数据

1 个答案: