Arrays 数组按预期在300毫秒后存在

我正在从与数据库连接的服务加载一个数组。从那里我构建了一个数组并将其返回到组件

我的服务

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;
}

问题：

this.bibleBooks[0]

未定义，因为我的服务会在300毫秒后给出答案。我怎样才能等到

这个.bibleBooks

是有效数组

---

我不想使用

setTimeout（）

。有更干净的解决方案吗？

这是一个

异步问题。为了便于解释，在
getBooks
中，您没有在返回
ar
之前等待
result
。然后，调用函数时，数组为空

它应该可以解决您的问题：

服务

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;
}

async getBooks（）{
让ar:BibleBook[]=[]；
试一试{
const result=等待this.db.allDocs({
包含文档：true
});
返回result.rows
.map（（行）=>行.doc）
.sort（（a，b）=>a.idb.id-1:0）；
}捕捉（错误）{
控制台日志（err）；
}
}

组件

ngOnInit() {
  this.bibleBooks = this.db.getBooks();
  this.selectBibleBook(this.bibleBooks[0]);
}

async ngOnInit（）{
this.bibleBooks=等待这个.db.getBooks（）；
this.selectBibleBooks（this.bibleBooks[0]）；
}
这是一个
异步问题。为了便于解释，在
getBooks
中，您没有在返回
ar
之前等待
result
。然后，调用函数时，数组为空

它应该可以解决您的问题：

服务

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;
}

async getBooks（）{
让ar:BibleBook[]=[]；
试一试{
const result=等待this.db.allDocs({
包含文档：true
});
返回result.rows
.map（（行）=>行.doc）
.sort（（a，b）=>a.idb.id-1:0）；
}捕捉（错误）{
控制台日志（err）；
}
}

组件

ngOnInit() {
  this.bibleBooks = this.db.getBooks();
  this.selectBibleBook(this.bibleBooks[0]);
}

async ngOnInit（）{
this.bibleBooks=等待这个.db.getBooks（）；
this.selectBibleBooks（this.bibleBooks[0]）；
}
使用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]);
}

诀窍是：


由于
wait
正在等待数据库调用，您的
getBooks（）
函数在从数据库中获取数据之前不会完成
感谢
等待getBooks（）
，在
getBooks（）
完成之前，您不会尝试
选择biblebook（）

我还简化了您的
.map（）
以获得更清晰的代码。
使用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]);
}

诀窍是：


由于
wait
正在等待数据库调用，您的
getBooks（）
函数在从数据库中获取数据之前不会完成
感谢
等待getBooks（）
，在
getBooks（）
完成之前，您不会尝试
选择biblebook（）

我还简化了你的
.map（）
以获得更清晰的代码。
你不必等待
这个.db.getBooks（）吗？我猜这是一个
async
requestYea..但是浏览器似乎比第一行更早调用第二行。。因此我得到了未定义的..@eleinad-是的，这就是异步请求的本质。你不必等待
这个.db.getBooks（）的
吗？我猜这是一个
async
requestYea..但是浏览器似乎比第一行更早调用第二行。。所以我没有定义。@eleinad-是的，这就是异步请求的本质。你的异步函数没有一个
wait
，因此代码仍然在做同样的事情。谢谢@K48，这只是一个错误。@Nenroz回答得不错，但我有点挑剔。使用
results.forEach（…
或
return results.map）（…
@AluanHaddad你说得对！我刚从原来的问题中修复了
异步
，但我很确定它可以优化。你的异步函数没有任何地方有
等待
，因此代码仍然在做同样的事情。谢谢@K48，这只是一个错误。@Nenroz回答不错，但我有挑剔的地方。使用
results.forEach（…
或
return results.map（…
@AluanHaddad）你说得对！我刚从原始问题中进行了
异步
修复，但我非常确定它可以优化。添加括号EP。添加括号