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

Posted

技术标签:

【中文标题】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 与异步混淆。

以上是关于Vuex:Axios GET 请求在组件内部返回未定义的主要内容,如果未能解决你的问题,请参考以下文章

Axios 拦截器未从 vuex 商店获取当前用户身份验证令牌

Vue.js / Vuex + axios 发送多个 PUT 请求

如何在Vue组件的方法内部访问axios

如何使用 Vuex 和 Axios 发布请求获取最新 ID

vuex中使用axios请求,提示读取不了。get或post

Laravel8 | Vuex:POST错误500(内部服务器错误)