如何使用axios从firebase获取批量数据分页？

Question

假设我有 1000 多篇博文。使用 axios 从 firebase 获取数据以存储在 nuxtServerInit 中的最佳做法是什么？

我能否以某种方式在第一次加载时先获取前 10 篇博文，然后再获取更多数据？

现在我的 vuex 操作如下：

nuxtServerInit(vuexContext, context) {
    return axios
      .get('https://my-blog.firebaseio.com/posts.json')
      .then(res => {
        const postsArray = []
        for (const key in res.data) {
          postsArray.push({ ...res.data[key], uid: key })
        }
        vuexContext.commit('setPosts', postsArray)
      })
      .catch(e => context.error(e))
  },

Answer 1

您使用的是REST API to access the Firebase Database。要检索有限数量的项目，请使用limit query。

https://my-blog.firebaseio.com/posts.json?limitToFirst=10

由于只有在您知道物品的顺序时限制才有意义，所以您还需要order the items，即在他们的钥匙上：

https://my-blog.firebaseio.com/posts.json?orderBy="$key"&limitToFirst=10

请注意，结果可能没有排序，因为 JSON 对象中属性的顺序是未定义的。所以结果将包含前 10 个帖子，但它可能不会以正确的顺序显示它们。

下一步是获取接下来的 10 个项目。与大多数传统数据库不同，Firebase 的查询不支持偏移子句。所以你不能告诉它跳过前 10 项来进入下 10 项。

取而代之的是Firebase queries use anchors/ranges：您必须知道上一页的最后一项才能为下一页构建查询。假设第 10 条帖子的 key 为 keyOfPost10，则可以通过以下方式进入下一页：

https://my-blog.firebaseio.com/posts.json?orderBy="$key"&startAt="keyOfPost10"&limitToFirst=11

我们需要在此处检索 11 个帖子，因为我们还获得了第 10 个帖子。这也意味着您需要过滤客户端代码中的重叠帖子。