时间戳

首页 > 解决方案 > 获取请求用户名 firebase [VUE]

javascript - 获取请求用户名 firebase [VUE]

问题描述

我正在尝试使用 Firebase 设置一个数据库，该数据库也有一个用户名字段。我正在使用 Google 的身份工具包 ( https://cloud.google.com/identity-platform/docs/reference/rest/v1/accounts/signInWithPassword ) 进行注册和登录操作。但据我所知，我无法在注册数据库中存储用户名，因为我无法更改表格和内容。这就是我创建自己的 Firebase 数据库的原因（见图，该数据库中的数据是通过 POST 请求存储的）。我想要做的是通过 GET 请求获取用户名。

我可以建立与我自己的 Firebase 数据库的连接并获得正常响应。我正在使用以下代码执行此操作：

const responseUser = await fetch(
  `https://[firebase-link].firebasedatabase.app/users/${userId}.json`,
  {
    method: "GET",
  }
);

这在我登录时收到响应，状态为 200（这似乎是正确的连接）。在console.log中我也可以清楚地看到我在请求中使用的对应的userId，它与数据库中的userId匹配。据我所知，我实际上在数据库中找到了正确的用户，但是没有地方可以找到用户名。第二个屏幕截图是我得到的响应。我已经尝试在响应中打开几乎所有选项，但没有地方可以找到数据库中的名称。

我知道我错过了一些可能非常简单的东西，但我似乎无法弄清楚。你们能帮帮我吗？

我的 Firebase 数据库来自 GET 请求的 console.log 响应

编辑：我正在尝试寻找另一种方法，我正在返回所有用户的列表（无论如何不会那么多），然后我使用 for 循环遍历每个条目。请参见下面的代码：

const responseUser = await fetch(
  `https://[firebase-link].firebasedatabase.app/users.json`,
  {
    method: "GET",
  }
);

// console.log(responseUser);

const responseUserData = await responseUser.json();
// console.log("ResponseUserData ===");
// console.log(responseUserData);

for (let userData in responseUserData) {
  let userId = responseData.localId;
  console.log("== userId");
  console.log(userId); // returns the user ID I need to filter the userData on

  console.log("== full user item");
  console.log(userData); // returns the user item, which contains userId and userName
  console.log("---------------------------------");

  // How do I filter to get the userName of userItem with corresponding userId?
}

现在我需要做的就是过滤 userItem，就像我在代码的最后评论中所说的那样。怎么样？

我试图过滤以下方式：

const user = responseUserData.filter(user => user.userId === userId)
console.log(user);

但这给了我一个错误Uncaught (in promise) TypeError: responseUserData.filter is not a function

标签： javascriptfirebasevue.jsfirebase-realtime-databaseget

解决方案

查看Fetch API的文档：使用 fetch 的调用返回一个包含响应（一个Response对象）的 Promise。然后，要从响应中提取 JSON 正文内容，文档表明您需要使用该json()方法，该方法“返回一个使用 JavaScript 对象解析的 Promise，该对象是将正文文本解析为 JSON 的结果”。

该文档显示了以下示例，使用了两次then()方法（即链接 Promises），因为返回了两个 Promise，如上所述。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

在您的情况下，由于您使用async/await，因此以下操作可以解决问题：

const response = await fetch(
      `https://[firebase-link].firebasedatabase.app/users/${userId}.json`,
      {
        method: 'GET',
      }
    );

const responseData = await response.json();
console.log(responseData);
console.log(responseData.userName);

推荐阅读