代码之家 › 专栏 › 技术社区 › Cameron

数据显示在websocket响应中,但未显示在已解决的promise中

nuxt.js vuex socket.io vue.js node.js

1

Cameron · 技术社区 · 8 年前

我正在使用Nuxt+Express/Feathers构建一个应用程序,这两个应用程序通过套接字进行通信。io连接。使用feathers vuex,我可以轻松地从客户端向后端发出请求,并且在chrome inspector的“网络”选项卡中可以完美地返回响应,但在我代码中已解决的承诺中,每个返回的对象都是 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 看起来像[空,空,空]。

我完全不知道是什么导致了这种行为。尽管数据本身没有(但数字的条目仍然存在)?websocket帧响应和导致数据消失的承诺之间发生了什么?

3 回复 | 直到 8 年前

1

jfriend00 8 年前

.findJournals() 是异步的。这意味着该方法在获得结果之前很久就会返回。你没有给我们显示调用 .findJournals() ,但按照其结构方式,调用代码无法访问 .journals 属性,因为当 .findJournals() 返回。因此,您需要做的是返回承诺,并让调用方使用该承诺来获得结果。

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

然后,调用方将执行以下操作:

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

2

1

Mahmud Adam 8 年前

没有看到您的代码 findJournals 在你的Vuex商店中,我只能想象你没有在行动中回报承诺。看看这个例子: https://codesandbox.io/s/6w97yx0yo3 .如果您没有 return 在…内 loadSomeUsers ,您在组件中得到的响应是 undefined 而不是期望的有效载荷。

3

0

Cameron 8 年前

解决了问题。把一些调试器扔进了 feathers-vuex 并意识到我没有 idField 到 _id 在我的FeatherClient配置中。