如何在 React 中优雅地处理丢失的用户数据而不暴露后端问题？

Question

我正在构建一个基于微服务的应用程序，在前端我使用 React 和 TypeScript。在其中一项服务中，我获取发布数据以显示给用户。每个帖子都有一个用户字段，其中包含有关创建该帖子的用户的详细信息。但是，如果用户服务宕机，则响应中的用户字段为空。

以下是用户服务不可用时的响应示例：

{
  "id": 1,
  "content": "Sample post content",
  "user": null
}

在这种情况下，我想显示帖子而不向用户透露存在问题（例如用户服务已关闭）。例如，我可能会显示“匿名”之类的内容来代替用户名。但是，我想避免显式使用 if-else 或三元运算来处理 null 值。

我尝试过使用可选链，但它仍然需要我提供后备逻辑，如 user?.name || “匿名”我也尝试过将逻辑包装在函数中，但感觉跨组件重复。

在 React 中干净处理此类场景、确保可维护性并避免整个代码库中重复的条件逻辑的最佳方法是什么？

Answer 1

如何定义一个函数来获取用户始终解析为

User

？

类似：

interface User {
  name: string
}

export const fetchUser = async (): Promise<User> => {
  try {
    const response = await fetch('api.com/user')
    return (await reponse.json()) as User;
  } catch (error) {
    return { name: 'Anonymous' }
  }
}

请记住，请求失败仍然可以在开发者控制台的网络选项卡中看到。