Javascript 当从VueJS组件调用包装函数时，等待Dexie查询返回是一个承诺

这很可能与VueJS无关，但我之所以提到它，是因为我正在使用的环境

我是IndexedDB的新手，决定和Dexie合作，以消除很多复杂性。我首先创建了一个非常简单的数据库，其中包含一个简单的where查询。Dexie的所有函数都是返回承诺，因此在我的Vue组件中，我将查询包装在异步/等待组件方法中

然而，当我调用函数时，包装器函数返回一个承诺，而不是等待Dexie查询。如果我console.log查询或将查询的返回值分配给组件变量，wait将起作用，而不是直接使用函数的返回值

这很可能是我对忽略的承诺的误解，但为什么我的函数在等待Dexie查询时仍返回承诺

//vue路线 { ... beforeEnter:to、from、next=>{ const_db=新的索引'TestDb' _db.version1.stores{ 人员：“++id、姓名、年龄” } Vue.prototype.$\u db=\u db 下一个 } 这是因为异步函数总是返回承诺。从MDN：

异步函数总是返回一个承诺。如果异步函数的返回值不是显式的承诺，它将隐式地包装在承诺中

您使用的等待语句不会执行此操作：

等待表达式通过异步函数暂停进程…承诺的解析值被视为等待表达式的返回值

因此，当您记录这样一条语句时，您会看到该值。但如果您返回该值并记录它，它将被包装在该隐式承诺中。

这是因为异步函数总是返回承诺。从MDN：

异步函数总是返回一个承诺。如果异步函数的返回值不是显式的承诺，它将隐式地包装在承诺中

您使用的等待语句不会执行此操作：

等待表达式通过异步函数暂停进程…承诺的解析值被视为等待表达式的返回值

---

因此，当您记录这样一条语句时，您会看到该值。但是，如果您返回该值并记录它，它将被包装在该隐式承诺中。

因此，您需要再次等待包装函数来打开该承诺，这无法从Vue组件模板内完成。此外，Vue呈现是同步的，因此异步代码可以所以他们唯一的方法就是将返回值赋给一个组件变量，并在模板中使用它？来源：是的，这听起来不错。另外，在模板中等待会很难看，即使它确实起作用。在n可能您需要再次等待包装函数来打开承诺，这不能从Vue组件模板中完成。此外，Vue呈现是同步的，因此无法从中调用异步代码，这是有意义的。因此，他们唯一的方法是使用将返回值赋给组件变量并使用该变量ide模板？来源：是的，听起来不错。另外，在模板中等待会很难看，即使它确实有效。尽可能将业务逻辑保留在控制器组件实例中总是好的

// vue component template
...
<div>
  {{ getPeople('Pearl') }}
</div>
...

  // vue component script
  ...
  mounted () {
    this.$_db.people.add({ name: 'Mr. Krabs', age: '75' })
    this.$_db.people.add({ name: 'Pearl', age: '17' })
  },

  async getPeople (name) {
    console.log(await this.$_db.people.where({
      name: name
    }).first()
    )

    return await this.$_db.people.where({
      name: name
    }).first()
  }