Vuex: GET-запрос Axios возвращает неопределенный внутренний компонент

Question

Я использую Vuex / Axios для выполнения запросов GET к API. Когда компонент монтируется, я отправляю действие в хранилище Vuex и делаю GET-запрос Axios. В действии 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;

Затем я отправляю действие Vuex внутри компонента Vue при монтировании:

<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>

Файл console.log в modules/character.js регистрирует данные, как ожидается, а затем ответ внутри журналов компонентов не определен. Я убедился, чтобы вернуть переменную characters в модуле Vuex. И я также сделал действие Vuex fetchCharacters асинхронным. Так почему же ответ в компоненте возвращается неопределенным?

Спасибо, если вы можете помочь.

Answer 1

Измените это:

async fetchCharacters({ commit }) {
  await plainAxiosInstance

на это:

fetchCharacters({ commit }) {
  return plainAxiosInstance

Вы можете оставить async, если хотите, но это не будет иметь никакого значения.

В своем нынешнем виде действие неявно возвращает обещание, и это обещание не будет выполнено до тех пор, пока запрос не будет выполнен. Однако ему нечего сказать, чтобы разрешить это обещание до желаемого значения.

Вместо ожидания обещания внутри действия вы можете просто вместо этого вернуть это обещание. Внешне это не будет иметь никакого значения, так как вы просто вернете обещание в любом случае, но важно, что обещание примет правильное значение после завершения запроса.