数据显示在 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

.findJournals() 是异步的。这意味着方法 returns 在获得结果之前很久。您没有向我们展示调用 .findJournals() 的代码，但是按照您的结构方式，调用代码无法访问 .journals 属性，因为它不会.findJournals() returns 时尚未设置。因此，您需要做的是 return 承诺并让调用者使用该承诺来获得结果。

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

然后，调用者会这样做：

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

Answer 2

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

Answer 3

解决了问题。在 feathers-vuex 操作中投入了一些调试器并意识到我没有在我的 feathersClient 配置中将我的 idField 设置为 _id。

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

Data shows up in websocket response but not in resolved promise

node.js

socket.io

vue.js

vuex

nuxt.js