Question

我正在使用Vuex / Axios向API发出GET请求。装入组件后，我将向Vuex存储调度一个动作，并发出Axios GET请求。在Vuex操作中，Axios GET请求按预期返回响应，但是组件内部的响应返回未定义。我在做什么错了？

axios/index.js

import axios from 'axios';

const API_URL = 'http://localhost:3000/api/v1/';

const plainAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
});

export { plainAxiosInstance };

Vuex模块：store/modules/character.js。 response在此文件中记录正确的响应。 fetchCharacters事件在组件中触发。

import { plainAxiosInstance } from '@/axios';

const characterModule = {
  namespaced: true,
  state: {
    characters: []
  },
  mutations: {
    SET_CHARACTERS(state, characters) {
      state.characters = characters;
    }
  },
  actions: {
    async fetchCharacters({ commit }) {
      await plainAxiosInstance
        .get('/characters')
        .then(response => {
          let characters = response.data;
          commit('SET_CHARACTERS', characters);
          console.log(characters); <-- Logs the expected response data
          return characters;
        })
        .catch(error => console.log('Failed to fetch characters', error));
    }
  },
  getters: {}
};

export default characterModule;

然后我将在挂载的Vue组件内分派Vuex动作：

<script>
import { mapState, mapActions } from 'vuex';

export default {
  mounted() {
    this.fetchCharacters()
      .then(response => {
        console.log('response', response);
        // response is logging undefined here <----
      })
      .catch(error => {
        console.log(error);
      });
  },
  computed: mapState(['character']),
  methods: mapActions('character', ['fetchCharacters'])
};
</script>

modules/character.js中的console.log按预期记录数据，然后组件内部的响应未定义。我确保在Vuex模块中返回变量characters。我还使Vuex操作fetchCharacters异步了。那么，为什么组件中的响应返回未定义？

感谢您的帮助。

Answer 1

更改此：

async fetchCharacters({ commit }) {
  await plainAxiosInstance

对此：

fetchCharacters({ commit }) {
  return plainAxiosInstance

如果需要，您可以保留async，但没有任何区别。

以当前形式，该操作将隐式返回一个Promise，并且该Promise在请求完成之前不会解析。但是，没有什么可以告诉它将诺言解决为期望的值。

您无需等待动作中的承诺，而只需返回该承诺即可。从外部看，这不会有任何区别，因为您可以通过任何一种方式都可以收回承诺，但至关重要的是，一旦请求完成，该承诺将解析为正确的值。

Vuex：Axios GET请求在组件内部返回未定义

1 个答案: