Axios 'Get' 函数未调用

Posted 2023-02-22

【中文标题】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 函数。

【参考方案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() 工厂中定义，因此它可能不是反应性的。如果您无法弄清楚代码中的其他错误是什么，我建议您提出一个新问题。