Vuex Action - 返回 Axios Promise

Posted 2023-02-22

【中文标题】Vuex Action - 返回 Axios Promise

【英文标题】：Vuex Action - Returning Axios Promise

【发布时间】：2019-05-08 00:40:21

【问题描述】：

我在两个地方使用 axios 返回的承诺时遇到了一些困难。我想在我的 Vuex 操作中使用 .then() 来提交对我的状态的更改，返回 axios 承诺并在我的组件中再次使用 .then() 来更新 UI。我遇到的问题是我的组件内部未定义承诺响应。

// component
methods: 
  getUser(userId) 
    this.$store.dispatch('GET_USER', userId)
      .then(response => 
        console.log(response); // undefined
      );
  


// vuex
actions: 
  GET_USER: (commit, userId) => 
    return api.getUserById(userId)
      .then((data) => 
        commit('ADD_USER', data);
      );
  


// api service
getUserById(userId) 
  return axios.get('/api/users/' + userId);

如果我在我的 Vuex 操作中删除 .then() 的使用，response 将成为我的 api 中的对象，但我想在我的组件中有一个承诺，以便我可以 catch 错误。

// component
methods: 
  getUser(userId) 
    this.$store.dispatch('GET_USER', userId)
      .then(response => 
        console.log(response); // no longer undefined
      );
  


// vuex
actions: 
  GET_USER: (commit, userId) => 
    return api.getUserById(userId); // removed 'then' method
  

第一个代码块有什么问题？ 谢谢。

【问题讨论】：

在第一个块中，您的 then 不返回任何内容（因此返回 undefined）

@Vivick 从第一个 then 内部返回 data 有效。谢谢你。欢迎您写一个答案，这样您就可以获得代表。

【参考方案1】：

在第一个块中，您的 then 不返回任何内容：因此它返回 undefined。返回已解决的值应该可以解决此问题。

【讨论】：

我现在有另一个问题。链接.catch(response => ) 给了我TypeError: Converting circular structure to JSON at JSON.stringify...

这将是一个单独的问题，感觉像是 axios 反序列化的问题

【参考方案2】：

你必须搜索、mapGetters、mapActions 并且你必须检查异步函数

例如

如果你请求 api 你可以这样做。

//api.js

import axios from 'axios'
export aync function getuser() 
  ... 
  ...
  const data = await axios.get(url,params:....)
  return data

//component
import getuser from '@/app.js'
import mapAction from 'vuex'
  data() 
  return 
    data:null
  

methods: 
..mapAction('getUserAction')
  async getUserMethod () 
    this.data = await getuser()
    this.getUserAction(this.data)
  




//store.js
actions: 

getUserAction () 
  // your actions..