Axios 'Get' 函数未调用答案

【问题标题】：Axios 'Get' Function Not CallingAxios 'Get' 函数未调用
【发布时间】：2019-06-21 00:24:29
【问题描述】：

所以，我想在添加新联系人后检索更新的联系人列表。不幸的是，axios 仅在 'beforeMount()' 实例上加载获取请求。当我尝试在 axios.post 请求中调用函数成功时，联系人列表消失了，直到我再次刷新页面。

我正在运行 Laravel 5.7 和 VueJs 2.5.22。

 import axios from 'axios';

  export default {
    data() {
      return {
        companion: {
          name: '',
          desc: '',
          primaryPhone: '',
          secondaryPhone: '',
          email: '',
          address: '',
          notes: '',
          image: ''
    },
    characterAmount: 0
  };
},
props: {
  addCompanion: {
    type: Boolean
  }
},
methods: {
  checkNotesLength(e) {
    this.characterAmount = 
    document.getElementById('notes').value.length;

    if (e.keyCode === 8) {
      this.characterAmount--;
      if (this.characterAmount < 0) {
        this.characterAmount = 0;
      }
    } else {
      this.characterAmount++;
      if (this.characterAmount > 150) {
        this.characterAmount = 150;
      }
    }
  },
  processFile(e) {
    var input = e.target;
    var reader = new FileReader();

    reader.onload = (e) => {
      this.companion.image = e.target.result;
    }
    reader.readAsDataURL(input.files[0]);
  },
  getCompanions() {
    const url = window.location + 'companions';

    axios.get(url)
      .then((response) => {
        this.companions = response.data;
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  },
  submitCompanion() {
    const formData = {
      name: this.companion.name,
      desc: this.companion.desc,
      primaryPhone: this.companion.primaryPhone,
      secondaryPhone: this.companion.secondaryPhone,
      email: this.companion.email,
      address: this.companion.address,
      notes: this.companion.notes,
      image: this.companion.image
    }
    axios.post('/companion/create', formData)
    .then(this.getCompanions())
    .then((response) => {
      this.addCompanion = !this.addCompanion;
      //need to clear form and include messages, also need to add validation
    })
    .catch((error) => {
      console.log(error);
    });
  }
}
}

beforeMount() 函数在我的 App.vue 上，它只调用与上面看到的相同的 getCompanions 函数。

【问题讨论】：

标签： javascript laravel vue.js axios

【解决方案1】：

这可能是因为你的 url 结构错误。

const url = window.location + 'companions';

应该是

const url = window.location + '/companions';

【讨论】：

当你 console.log 的 response.data 为 const url = window.location + 'companions';你有任何输出吗？
是的，所有的数据都在那里，并且 url 是正确的。传递数据似乎不是问题。问题似乎是不再调用 get 请求。

【解决方案2】：

我在您的代码中看到的问题是您没有正确传递回调。此代码将立即执行函数getCompanions()：

.then(this.getCompanions())

要将它作为回调传递，请尝试这样的操作

.then(this.getCompanions.bind(this))
// OR
.then(() => this.getCompanions())

【讨论】：

啊，有道理。我确实添加了这个更改，但不幸的是问题仍然存在。仍在正确写入数据库，但没有刷新。
@valtro05 你在开发者工具网络标签中看到get 请求了吗？
是的 - 看起来它运行良好并携带了数据。老实说，我很困惑，哈哈。
@valtro05 听起来请求未通过的原始问题已修复。我不确定加载冠军列表后你会发生什么。我不是 Vue 专家，但 champions 属性未在 data() 工厂中定义，因此它可能不是反应性的。如果您无法弄清楚代码中的其他错误是什么，我建议您提出一个新问题。