在获取的 JSON 中添加自定义键答案

【问题标题】：Add custom key in fetched JSON在获取的 JSON 中添加自定义键
【发布时间】：2020-12-30 18:18:15
【问题描述】：

我正在用 React 制作简单的博客网站，当我获取帖子时，我得到了发布它的用户 ID。使用此 ID，我正在创建另一个 axios，在其中获取具有给定 ID 的用户，然后将 author 键分配给我获取的帖子 JSON，如下所示：


export const getPosts = async () => {
  try {
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    for (const item of data) {
      let user = await getUser(item["userId"]);
      item["author"] = user.username;
    }
    return data;
  } catch (err) {
    toast.error(err.message);
  }
};

export const getUser = async (id) => {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users/" + id
    );
    return response.data;
  } catch (err) {
    toast.error(err.message);
  }
};

此方法会导致帖子显示延迟 5-10 秒。我正在寻找更快、更简单的方法来向每个帖子显示用户名。你也可以告诉我是否有更好的方法来获取数据并显示它。

谢谢！

【问题讨论】：

标签： json reactjs axios

【解决方案1】：

如果没有其他端点可用于一次获取多个帖子作者信息，那么您已经以完全正确的方式完成了。

嗯，这是一个答案，但我想从一个问题开始。

您是否有权访问处理您尝试从中获取的 Restful API 端点的维护者或开发者？

如果是？

告诉他们在获取帖子的响应中简单地包含作者信息

或者简单地为您提供一个端点，允许您一次获取许多帖子的作者信息。

如果没有

查看提供的文档（如果有），看看是否有任何端点允许您通过单个请求获取多个帖子的作者信息。

如果上述选项似乎都不是一种方法，请记住在获取资源时阻止 UI。

您也可以先获取少数作者，然后在后台获取更多作者或根据用户请求获取更多内容时显示，这样可以提供更好的用户体验。

快乐的黑客和编码?

【讨论】：