仅在 db 获取功能后使用 async/await 呈现信息答案

【问题标题】：Using async/await to render information only after db fetching function仅在 db 获取功能后使用 async/await 呈现信息
【发布时间】：2020-09-03 18:26:53
【问题描述】：

所以我有一个 db 获取函数，它从 firebase 获取数据，当您最初打开页面时这需要一些时间，（数据仅在 700 毫秒后完成获取），我正在尝试实现一种让我渲染的方法仅在我使用 async/await 和 promise 获取所有数据后才从数据库中获取初始信息，但我无法正确实现它。

该项目是一个小库列表，getFromDB() 将所有信息从 firebase 获取到一个数组中（将 DB 与本地用户同步），render() 只是将页面中的信息呈现为整洁的表格格式

// Get all books from the FirebaseDB and synchs with myLibrary Array
function getFromDB() {
    return new Promise((resolve, reject) => {
        myLibrary.length = 0; // clears original stored array to get all books again
        firebaseRef.on("value", function (data) {
            data.forEach((book) => {
                //gets each book from firebase creates new book Object to array in the correct order(chronologically)
                property = book.val();
                let addedBook = new Book(
                    property.title,
                    property.author,
                    property.pages,
                    property.read,
                    book.key
                );
                myLibrary.push(addedBook);
            });
        });
        resolve(true); // resolve
    });
}

async function initialRender() {
    await getFromDB();
    render();
}

initialRender();

仍然没有呈现信息，因为render() 函数在任何信息获取完成之前运行。如果我之后在控制台上手动运行render()，一切都会正确呈现，这意味着等待或承诺没有按预期工作。

【问题讨论】：

您应该在 firebaseRef.on() 内部解析，以便等待它完成。

标签： javascript promise async-await es6-promise

【解决方案1】：

尝试将您的 resolve(true); 调用移动到您的 firebaseRef.on 函数的末尾。现在发生的事情是，firebaseRef.on 是一个 async 函数，而resolve 是在这个函数之后而不是在它内部编写的，resolve(true);将在 getFromDB 运行后立即运行。

// Get all books from the FirebaseDB and synchs with myLibrary Array
function getFromDB() {
    return new Promise((resolve, reject) => {
        myLibrary.length = 0; // clears original stored array to get all books again
        firebaseRef.on("value", function (data) {
            data.forEach((book) => {
                //gets each book from firebase creates new book Object to array in the correct order(chronologically)
                property = book.val();
                let addedBook = new Book(
                    property.title,
                    property.author,
                    property.pages,
                    property.read,
                    book.key
                );
                myLibrary.push(addedBook);
            });
            // resolve moved inside
            resolve(true);
             ^^^^^^^^^^^^
        });
         
    });
}

async function initialRender() {
    await getFromDB();
    render();
}

【讨论】：