Firebase异步数据获取与Promise应用技巧

文章不知道大家是否熟悉？今天我将给大家介绍《Firebase异步数据获取Promise处理技巧》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

本文旨在解决在使用Firebase实时数据库进行数据获取时，因不当使用`async/await`和Promise而导致函数返回Promise而非实际数据的问题。我们将深入探讨`async/await`的工作原理，提供正确的代码实现范例，并强调在异步操作中如何有效管理和获取期望的数据值，确保数据检索的准确性与程序的健壮性。

理解Firebase异步数据获取与Promise

在使用Firebase实时数据库的get函数获取数据时，它是一个异步操作。这意味着get函数不会立即返回数据，而是返回一个Promise对象。Promise代表了一个异步操作的最终完成（或失败）及其结果值。JavaScript中的async/await语法是处理Promise的一种更简洁、更易读的方式。

当一个函数被标记为async时，它总是会返回一个Promise。即使函数体内部没有显式地返回Promise，JavaScript也会将其返回值包装在一个已解决的Promise中。await关键字只能在async函数内部使用，它会暂停async函数的执行，直到其后的Promise解决并返回结果。

常见问题：函数返回Promise而非实际数据

开发者在使用async/await时常遇到的一个误区是，在async函数内部使用了.then()方法处理Promise，但没有正确地将最终结果从async函数中返回，或者没有在调用async函数时使用await。

考虑以下不正确的代码示例：

const getData = async () => {
    const dbRef = ref(getDatabase());
    const reference = get(child(dbRef, `users/${user.uid}`));

    // 问题所在：这里await reference.then()，但then的回调函数返回值并未被getData函数捕获并返回
    await reference.then((snapshot) => {
        if (snapshot.exists()) {
            console.log("snap", snapshot.val());
            return snapshot.val(); // 这个返回值只作用于then()回调内部，不影响getData()的返回值
        }
    });
    // getData函数没有显式返回任何值，或者返回了一个未被正确处理的Promise
};

// 调用getData()时，由于getData是async函数，它总是返回一个Promise
let check = getData();
console.log("check", check); // 输出将是 Promise { _A: null, ... }

在这个示例中，getData函数被标记为async，因此它总是返回一个Promise。虽然await reference.then(...)会等待内部的Promise解决，但then回调函数内部的return snapshot.val()仅将值返回给了then方法本身，而没有将该值传递给getData函数外部的调用者。getData函数最终隐式返回了一个Promise，但这个Promise在没有显式return语句的情况下，其解决值将是undefined。

正确处理异步数据获取

要正确地从async函数中获取数据，我们需要确保两点：

1. 在async函数内部，使用await来等待Promise解决，并将解决后的值赋给一个变量。
2. async函数本身需要返回这个处理后的值。
3. 在调用async函数的地方，也需要使用await来等待它返回的Promise解决。

使用 async/await 的正确姿势

import { getDatabase, ref, child, get } from "firebase/database";

// 假设 user 对象在作用域内可用
// const user = { uid: "8um8zHvlEvYRYnDrpNXnY8Kcc4s1" }; 

const getData = async () => {
    const db = getDatabase();
    const dbRef = ref(db);
    // 直接await get()返回的Promise，获取snapshot对象
    const snapshot = await get(child(dbRef, `users/${user.uid}`));

    if (snapshot.exists()) {
        console.log("snap", snapshot.val());
        return snapshot.val(); // 将snapshot的值作为getData()函数的解决值返回
    } else {
        // 当数据不存在时，需要明确返回什么，例如null或抛出错误
        console.log("No data available");
        return null; 
    }
};

// 调用getData()时，也需要使用await来等待其返回的Promise解决
const fetchData = async () => {
    try {
        let userData = await getData();
        console.log("check", userData); // 这里将打印出实际的用户数据对象
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchData();

在这个修正后的代码中：

• const snapshot = await get(child(dbRef, \users/${user.uid}`));：我们直接await了get函数返回的Promise，这样snapshot`变量就会直接接收到Promise解决后的值（即DataSnapshot对象），而不是Promise本身。
• return snapshot.val();：getData函数现在显式地返回了从snapshot中提取的实际数据。由于getData是async函数，这个返回值会被自动包装在一个已解决的Promise中。
• let userData = await getData();：在调用getData的地方，我们再次使用了await。这意味着userData变量将接收到getData函数返回的Promise解决后的值，也就是我们期望的用户数据对象。

使用 .then() 的替代方案

如果您更倾向于使用 .then() 链式调用，也可以实现同样的效果：

import { getDatabase, ref, child, get } from "firebase/database";

// const user = { uid: "8um8zHvlEvYRYnDrpNXnY8Kcc4s1" }; 

const getDataWithThen = () => {
    const db = getDatabase();
    const dbRef = ref(db);
    // 返回get()函数本身返回的Promise
    return get(child(dbRef, `users/${user.uid}`))
        .then((snapshot) => {
            if (snapshot.exists()) {
                console.log("snap", snapshot.val());
                return snapshot.val(); // 将数据返回，作为这个then()链的解决值
            } else {
                console.log("No data available");
                return null;
            }
        })
        .catch((error) => {
            console.error("Error fetching data:", error);
            throw error; // 捕获错误并重新抛出，以便外部调用者也能处理
        });
};

// 调用getDataWithThen()时，使用.then()来处理其返回的Promise
getDataWithThen()
    .then((userData) => {
        console.log("check", userData); // 这里将打印出实际的用户数据对象
    })
    .catch((error) => {
        console.error("Failed to get user data:", error);
    });

在这个.then()示例中，getDataWithThen函数直接返回了get(...).then(...)链的最终Promise。外部调用者通过.then()和.catch()来处理这个Promise的解决值和潜在错误。

注意事项与最佳实践

1. 避免混合await和.then()：除非您非常清楚自己在做什么，否则不建议在同一个异步操作中同时使用await和.then()。这通常会导致代码复杂化并引入潜在的逻辑错误。通常，选择一种方式（async/await或.then()链）并坚持使用。
2. async函数总是返回Promise：记住，任何被标记为async的函数，其返回值都会被包装在一个Promise中。要获取这个Promise的实际解决值，您必须在调用该async函数时使用await或.then()。
3. 处理数据不存在的情况：在获取数据时，始终要考虑数据可能不存在的情况（snapshot.exists()为false）。在这种情况下，您的函数应该明确返回一个有意义的值（如null、undefined）或者抛出一个自定义错误，以便调用者能够恰当地处理。
4. 错误处理：异步操作容易出错。务必使用try...catch块（对于async/await）或.catch()方法（对于.then()链）来捕获和处理可能发生的错误，提高应用程序的健壮性。

总结

正确理解和运用JavaScript中的Promise以及async/await语法对于处理Firebase等异步数据源至关重要。核心在于：async函数返回Promise，await用于等待Promise解决并获取其值，且在调用async函数时，也需使用await或.then()来处理其返回的Promise。遵循这些原则，将确保您能准确地从异步操作中获取所需数据，避免常见的Promise陷阱。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~