当从 VueJS 组件调用包装函数时，等待 Dexie 查询 returns 是承诺

Question

这很可能与 VueJS 没有任何关系，但我提到它是因为它是我正在使用的环境。

我是 IndexedDB 的新手，决定使用 Dexie 来消除很多复杂性。我开始使用简单的 where 查询创建一个非常简单的数据库。 Dexie 的所有功能都是 return 承诺，因此在我的 Vue 组件中，我将查询包装在 async/await 组件方法中。

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

这很可能是我对我忽略的 promise 的一些误解，但为什么我的函数 return 是一个 promise，即使我正在等待 Dexie 查询？

// vue route
{
  ...
  beforeEnter: (to, from, next) => {
      const _db = new Dexie('TestDb')
      _db.version(1).stores({
        people: '++id,name,age'
      })

  Vue.prototype.$_db = _db

  next ()
}

// 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()
  }

Answer 1

这是因为async 总是return 一个承诺。来自 MDN docs:

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

您使用 await 的声明不要这样做：

Await expressions suspend progress through an async function... The resolved value of the promise is treated as the return value of the await expression

因此，当您记录这样的语句时，您会看到它的价值。但是如果你return那个值并记录它，它就会被包裹在那个隐含的承诺中。

当从 VueJS 组件调用包装函数时，等待 Dexie 查询 returns 是承诺

Awaiting Dexie query returns is promise when wrapper function is invoked from VueJS component

javascript

promise

async-await

vue.js

dexie