javascript - 在渲染到页面之前如何处理 API 响应中的空对象？

Question

我目前正在使用 Petfinder 的 api 构建一个副项目以学习 Node.js。

问题是 Petfinder 的 api 有时会为我可能想要在页面上显示的特定字段返回一个空对象。到目前为止，我一直在检查是否存在非空对象，例如生成 HTML 时的情况:

<img class="pet-image" src="${Object.keys(pet.media).length !== 0 ? pet.media.photos.photo[3].$t : ""}">

但是这段代码非常丑陋，我知道不应该在这里完成。另外，总是必须对 API 响应中的非必填字段执行此操作会变得非常麻烦。如何处理这个问题有哪些策略？

Answer 1

What are some strategies on how to handle this?

有像_.get这样的工具(来自 lodash)它可以让您在路径上获取对象的属性并自动执行此操作 - 但通常来说，在代码中使用您不确定类型的对象并不是一个好方法。

最常见也是我最喜欢的策略是将对象转换为您在调用站点熟悉的形式(当请求到达时):

const someWeirdAPI = await fetch('./endpoint').then(x => x.json());
const result = {
  cake: someWeirdAPI.cake || "Default Cake",
  pets: someWeirdAPI.pets || [] // or some other default
  // ... etc
};

这样，您就知道当您在代码中获取该对象时，它始终有效 - 您还可以在 API 数据传输对象和域层对象(您的逻辑)之间进行转换时添加属性。