Axios 未在 Vuex 操作中返回响应

Question

我正在尝试使用 Axios 从 API 端点发送响应 GET，但没有任何回复。

我已经尝试将 Axios 调用放入组件和 Vuex 商店中，但到目前为止没有运气。

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vuex.Store({
  state: {
    similarTitles: []
  },
  mutations: {
    SIMILAR_TITLES_LIST(state, similarTitles) {
      state.similarTitles = similarTitles;
    }
  },
  actions: {
    async getSimilarTitles({ commit }, payload) {
      console.log("axios begin"); // this shows briefly
      await axios
        .get(
          `https://tastedive.com/api/similar?q=${payload}&type=books&info=1&k=${process.env.VUE_APP_TASTE_DIVE_API_KEY}`
        )
        .then(data => {
          console.log("did i get here?"); // this never shows
          console.log(data.Similar.Results); // or this
          commit("SIMILAR_TITLES_LIST", data.Similar.Results); // not surprising that this doesn't put info into state
        });
      console.log("axios end"); // this shows briefly
    }
  }
});

Recommender.vue

<template>
  <div class="recommender">
    <h1>Oscar's Book Recommendations!</h1>
    <form class="findTitle">
      <label for="enjoyedTitle">What's the name of a book you liked?</label>
      <br />
      <input type="text" id="enjoyedTitle" v-model="enjoyedTitle" />
      <br />
      <button @click="findSimilarTitles">Find a new book!</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "Recommender",
  data() {
    return {
      enjoyedTitle: ""
    };
  },
  methods: {
    async findSimilarTitles() {
      await this.$store.dispatch("getSimilarTitles", this.enjoyedTitle);
    }
  }
};
</script>

<style scoped lang="scss">
.recommender {
  display: flex;
  flex-flow: column nowrap;

  form {
    display: flex;
    flex-flow: column nowrap;
    align-self: center;
    width: 21em;

    button {
      align-self: center;
      width: 10em;
    }
  }
}
</style>

这无声无息地失败了。 Axios 调用前后的console.log 语句在控制台中短暂显示，但随后组件重置并且所有控制台语句消失。 Axios 调用中的console.log 语句从不显示。我知道这可以以某种方式起作用，否则互联网将无济于事。有人能指出我没有看到什么吗？

感谢您的帮助！谢谢！

Answer 1

你应该喜欢

async getSimilarTitles({ commit }, payload) {
  console.log("axios begin"); // this shows briefly
  await axios
    .get(
      `https://tastedive.com/api/similar?q=${payload}&type=books&info=1&k=${process.env.VUE_APP_TASTE_DIVE_API_KEY}`
    )
    .then(data => {
      console.log("did i get here?"); // this never shows
      console.log(data.Similar.Results); // or this
      commit("SIMILAR_TITLES_LIST", data.Similar.Results); // not surprising that this doesn't put info into state
    }).catch(err => {
        console.log('Call Failed!'); 
        console.log(err);
    });
  console.log("axios end"); // this shows briefly
}

}