如何在 vuex 动作中使用 promise

Question

最近，我正在尝试使用vuex和vue-resource实现一个RESTful api。但是当我使用vuex动作调用服务器时api，我遇到了以下问题

我的代码是这样的：

import api from '../api/api.js'

const actions = {
getData (context, userId) {
  api.get('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => console.log(response));//undefine
  }
}

我在 api.js 中的代码如下所示

import Vue from 'vue';

export default {
get(url, request) {
     return Vue.http.get(url, request)
         .then((response) => {
           Promise.resolve(response.body);
           console.log(response.body);//ok
         })
         .catch((error) => Promise.reject(error));
    },
}

我 api.js 的响应很好。但是动作的响应是不确定的。如果有人可以提供帮助，那就太好了？

Answer 1

如果您用大括号括起箭头函数，您现在需要手动 return 一些您没有做的事情。

此外，将答案包装在 Promise.resolve 内部回调到 then 是没有意义的。就 return response.body.

最后，.catch((error) => Promise.reject(error));毫无意义。你最终得到了与你已经拥有的完全相同的东西，你完全删除了整个 catch... 行代码，因为你只是拒绝了你已经被拒绝的相同错误。

换句话说，返工为：

import Vue from 'vue';

export default {
get(url, request) {
     return Vue.http.get(url, request)
         .then((response) => {
           return response.body;
         });
    },
}

Answer 2

这个动作的想法是它应该通过提交更新状态中的数据.. 然后你在 Vue 组件中使用存储数据.. 动作应该是无效的 return ..

您还应该通过 store.dispatch('getData', 有效负载) 之类的东西调用操作.. 但由于它 return 是一个承诺，您可以等待然后() store.dispatch 上的逻辑......（实际上应该这样做）

如何在 vuex 动作中使用 promise

How to use promise in vuex actions

vue-resource

vuex

vuejs2