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

Posted 2023-02-22

【中文标题】Vuex：Axios GET 请求在组件内部返回未定义

【英文标题】：Vuex: Axios GET request returns undefined inside component

【发布时间】：2020-03-03 15:32:57

【问题描述】：

我正在使用 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 async。那么为什么组件中的响应返回 undefined 呢？

如果您能提供帮助，谢谢。

【参考方案1】：

改变这个：

async fetchCharacters( commit ) 
  await plainAxiosInstance

到这里：

fetchCharacters( commit ) 
  return plainAxiosInstance

如果你愿意，你可以保留async，但这不会有任何区别。

在目前的形式中，该操作将隐式返回一个承诺，并且该承诺在请求完成之前不会解决。但是，没有什么可以告诉它将该承诺解决为所需的值。

您可以直接返回该承诺，而不是在操作中等待承诺。从外部看，这不会产生任何影响，因为无论哪种方式，您都会返回一个 Promise，但至关重要的是，一旦请求完成，该 Promise 将解析为正确的值。

【讨论】：

谢谢！那行得通。在fetchCharacters 操作中不返回任何内容是一种疏忽。为什么在这种情况下 async/await 不做任何事情？是不是因为 axios 请求已经异步了？

@JoelHoelting async 修饰符强制函数返回一个承诺。如果函数返回的不是一个承诺，它会自动包装在一个中。如果你想使用await 关键字，那么async 的使用是强制性的，因为await 只是一个承诺的语法糖。鉴于新代码不使用 await 并且已经返回了一个承诺，async 实际上不会做任何事情。此外，即使我们没有返回一个 Promise，Vuex 也会自动将一个动作的返回值包装在一个 Promise 中。不要将async 与异步混淆。