如何解决仅在db提取功能之后才使用async / await呈现信息
所以我有一个数据库获取功能,该功能是从firebase获取数据,最初打开页面时需要花费一些时间(数据仅在700ms后完成获取),我试图实现一种让我渲染的方法只有在我使用async / await和promises提取了所有数据之后,才从DB获得初始信息,但是我无法正确实现它。
该项目是一个小的库列表,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()
,则所有内容都会正确呈现,这意味着等待或承诺未按预期工作。
解决方法
尝试将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();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。