调用Firebase Realtime Database的getData方法返回undefined该如何处理？

问题原因 #

• 你拿到undefined的核心原因是getData当前是同步执行逻辑，但Firebase Realtime Database的once方法属于异步IO操作，你代码里写在finally回调中的return data不会被外层的getData函数接收。getData会在发起数据库请求后立即结束运行，没有显式返回值所以默认返回undefined，和你设置的200ms延时没有关联。

解决方案 #

必须采用异步方案实现，以下是可直接落地的修改代码：

第一步 修改database.js的getData方法 #

两种写法二选一即可：

写法1：直接返回Promise（更简洁）

getData(reference){
    return database.ref(reference).once("value")
    .then(snapshot => snapshot.val())
    .catch(error => {
        console.log(error)
        // 可选：出错时返回默认值避免后续逻辑报错
        return null
    })
},

写法2：async/await语法（可读性更高）

async getData(reference){
    try {
        const snapshot = await database.ref(reference).once("value")
        return snapshot.val()
    } catch (error) {
        console.log(error)
        return null
    }
},

第二步 修改页面调用逻辑 #

调用异步函数时需要用await接收返回值，外层函数要加async标识：

import { construct_bd } from "../../database.js";

function blog_posts() {
   let section = document.getElementById("blog_posts_container");

   // 加async标识
   async function show() {
      // 用await等待异步请求完成拿到结果
      let data = await construct_bd.getData("/posts");
      console.log(data)
      // 拿到data后再执行后续的渲染逻辑
   }
   // 这里的200ms延时如果是为了等数据库请求可以直接删掉，await已经保证请求完成才会走后续逻辑
   show()
   ...
}

其他可选方案 #

如果需要兼容不支持async/await的旧运行环境，也可以用Promise.then的方式接收返回值：

function show() {
  construct_bd.getData("/posts").then(data => {
    console.log(data)
    // 后续逻辑写在then回调里
  })
}

内容的提问来源于stack exchange，提问作者Bjorn Ruiz