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。

jrepl.bat /?

由于只有当您知道商品的订购顺序时，限制才有意义，因此您也想order the items，即输入商品的钥匙：

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

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

下一步是获取下10个项目。与大多数传统数据库不同，Firebase在查询中不支持offset子句。因此，您不能告诉它跳过前10个项目而转到下一个10个项目。

代替Firebase queries use anchors/ranges：您必须知道上一页的最后一项才能为下一页建立查询。假设第10个帖子的关键字为https://my-blog.firebaseio.com/posts.json?orderBy="$key"&limitToFirst=10，那么您可以使用以下内容获得下一页：

keyOfPost10

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

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

1 个答案: