时间戳

首页 > 解决方案 > 在获取的 JSON 中添加自定义键

json - 在获取的 JSON 中添加自定义键

问题描述

我正在用 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 秒延迟显示帖子。我正在寻找更快、更简单的方法来向每个帖子显示用户名。你也可以告诉我是否有更好的方法来获取数据并显示它。

谢谢！

标签： jsonreactjsaxios

解决方案

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

好吧，这是一个答案，但我会从一个问题开始。

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

如果是？

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

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

如果不

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

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

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

快乐的黑客和编码

推荐阅读