数组按预期在 300 毫秒后存在
Posted
技术标签:
【中文标题】数组按预期在 300 毫秒后存在【英文标题】:Array exists 300ms later as expected 【发布时间】:2019-11-25 07:33:00 【问题描述】:我正在从与 PouchDB 数据库连接的服务中加载一个数组。从那里我构建一个数组并将其返回给组件。
我的服务
getBooks()
let ar:BibleBook[] = [];
this.db.allDocs(
include_docs: true
).then(function (result)
result.rows.map((row) =>
ar.push(row.doc);
ar.sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
);
).catch(function (err)
console.log(err);
);
return ar;
我的组件
ngOnInit()
this.bibleBooks = this.db.getBooks();
this.selectBibleBook(this.bibleBooks[0]);
问题:this.bibleBooks[0]
未定义,因为我的服务的答案在 300 毫秒后出现。我怎样才能等到this.bibleBooks
是一个有效的数组?
我不想与setTimeout()
合作。有更清洁的解决方案吗?
【问题讨论】:
您不必为this.db.getBooks();
发送await
吗?我猜这是一个async
请求
是的..但是浏览器似乎比第一行更早地调用了第二行..所以我得到了未定义..
@eleinad - 是的,这就是异步请求的本质。
【参考方案1】:
这是一个async
问题。为了解释,在getBooks
中,您不会在返回ar
之前等待result
。然后,当函数被调用时,数组为空。
它应该可以解决您的问题:
服务
async getBooks()
let ar: BibleBook[] = [];
try
const result = await this.db.allDocs(
include_docs: true
);
return result.rows
.map((row) => row.doc)
.sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
catch (err)
console.log(err);
组件
async ngOnInit()
this.bibleBooks = await this.db.getBooks();
this.selectBibleBook(this.bibleBooks[0]);
【讨论】:
你的异步函数在任何地方都没有await
,因此代码仍然在做同样的事情。
谢谢@K48,这只是一个错误。
@Nenroz 不错的答案,但我挑剔。使用results.forEach(...
或return results.map(...
@AluanHaddad 你是对的!我刚刚从原始问题中修复了async
,但我很确定它可以优化【参考方案2】:
使用 async/await 重写所有内容。
async getBooks()
try
const ar: BibleBook[] = (await this.db
.allDocs( include_docs: true ))
.map(row => row.doc);
ar.sort((a, b) => b.id - a.id);
return ar;
catch (e)
console.log(e);
async ngOnInit()
this.bibleBooks = await this.db.getBooks();
this.selectBibleBook(this.bibleBooks[0]);
诀窍是:
在您从数据库中获取数据之前,您的getBooks()
函数不会完成,这要感谢 await
ing 数据库调用。
在getBooks()
完成之前,您不会尝试selectBibleBook()
,感谢await getBooks()
。
我还稍微简化了您的 .map()
,以使代码更简洁。
【讨论】:
是的。添加括号以上是关于数组按预期在 300 毫秒后存在的主要内容,如果未能解决你的问题,请参考以下文章
TEMPORARY TABLE 不存在,未按预期创建? MYSQL