数据显示在 websocket 响应中，但未显示在已解决的承诺中

Question

我正在使用 Nuxt + Express/Feathers 构建一个应用程序，两者通过 socket.io 连接进行通信。使用 feathers-vuex，我可以轻松地从客户端向后端发出请求，并且响应完美地返回到 chrome 检查器的网络选项卡中，但在我的代码中已解决的承诺中，每个返回的对象都是 undefined。

Websocket 请求：

4235["find", "journals", {}]

Websocket 响应：

4335[null, {total: 3, limit: 10, skip: 0,…}]
0: null
1: {total: 3, limit: 10, skip: 0,…}
  data: [{_id: "5af62077f2389a7490be22d6"}, {_id: "5af62094f2389a7490be22d7", some: "data"},…]
    0: {_id: "5af62077f2389a7490be22d6"}
    1: {_id: "5af62094f2389a7490be22d7", some: "data"}
    2: {_id: "5af66b3ae8c629789f35ead3", name: "john", surname: "doe"}
  limit: 10
  skip: 0
  total: 3

这就是results 在调试器中的样子：

{total: 3, limit: 10, skip: 0, data: Array(3)}
  data: Array(3)
    0: undefined
    1: undefined
    2: undefined
    length: 3
    __proto__: Array(0)
  limit: 10
  skip: 0
  total: 3
  __proto__:
    ...

这是我提出请求的 Nuxt 页面部分：

<template>
  <h1>{{journals}}</h1>
  <button class="btn btn-primary" @click="findThoseJournals()">
    Search Journals
  </button>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  data () {
    return {
      journals: []
    }
  },
  methods: {
    ...mapActions('journals', {
      findJournals: 'find'
    }),
    findThoseJournals() {
      this.findJournals({query: {}}).then((results) => {
        debugger;
        this.journals = results.data;
      });
    }
  },
}
</script>

为了记录，results.data 在渲染时看起来像 [null,null,null]。

我完全不知道是什么导致了这种行为。为什么元数据会延续，而数据本身却没有（但 number 的条目仍然如此）？在 websocket 帧响应和专门导致数据消失的承诺之间发生了什么？

Answer 1

找出问题所在。在feathers-vuex 操作中抛出了一些调试器，并意识到我没有在我的feathersClient 配置中将idField 设置为_id。

Answer 2

如果没有在 Vuex 商店中看到您的 findJournals 操作代码，我只能想象您没有在操作中返回 Promise。看看这个例子：https://codesandbox.io/s/6w97yx0yo3。如果您在 loadSomeUsers 中没有 return，则您在组件中返回的响应是 undefined，而不是所需的有效负载。

Answer 3

.findJournals() 是异步的。这意味着该方法在获得结果之前很久就返回了。您没有向我们展示调用.findJournals() 的代码，但是按照您的结构方式，调用代码无法访问.journals 属性，因为当.findJournals() 返回时它不会被设置.所以，你需要做的是返回promise，让调用者使用这个promise来获取结果。

findThoseJournals() {
  // return promise
  return this.findJournals({query: {}});
}

然后，调用者会这样做：

someObj.findThoseJournals().then(journals => {
    // use journals here
});