在 vuejs 应用程序中从 axios 获取数据时出错 [重复]

Posted 2023-02-22

【中文标题】在 vuejs 应用程序中从 axios 获取数据时出错 [重复]

【英文标题】：Error fetching data from axios in vuejs app [duplicate]

【发布时间】：2019-08-07 11:00:00

【问题描述】：

嘿，我正在尝试使用 vuejs fastifyjs（节点框架）制作一个完整的堆栈应用程序。 vue 应用程序从我开发的 api 中获取数据，并将其显示在浏览器控制台中，但它不会在应用程序中呈现它。我什至尝试在 mount 函数上加载它，但没有任何反应。

这是我正在使用的完整代码。

const app = new Vue(
  el:'#app',

  data:
    infos: [
      name: 'Vue',
      age: 19,
      imageUrl: 's3.aws.amazon.com'
    , 
      name: 'Vue 2',
      age: 20,
      imageUrl: 's3.aws.amazon.com2'
    ],
    msg: 'Hello Vuejs!'
  ,

  methods:
    getData: function()
      axios.get('http://localhost:3000/getData')
        .then(function(result)
          this.infos = result.data
          console.log(infos)
        )
        .catch(function(err)
          console.log(err)
        )
    
  
)

<div id="app">
  msg
  <button v-on:click="getData">Get Data</button><br><br>
  <div v-for="info in infos">
    <br>
    <span>Name: info.name</span><br>
    <span>Age: info.age</span><br>
    <span>Image: info.imageUrl</span><br>
  </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="index.js"></script>

这是我得到的图像。

The default values get rendered and also at the right the array gets logged.

完整代码在这里 https://github.com/siddiquiehtesham/fullstack-vue-nodejs-api

【参考方案1】：

在您的 axios 请求中，this 未绑定到您的 Vue 实例。

使用箭头函数来保持正确的上下文：

getData: function() 
  axios.get('http://localhost:3000/getData')
  .then(result => 
    this.infos = result.data
    console.log(this.infos)
  )
  .catch(err => 
    console.log(err)
  )

或者在请求前设置一个self变量：

getData: function() 
  let self = this
  axios.get('http://localhost:3000/getData')
  .then(function(result) 
    self.infos = result.data
    console.log(self.infos)
  )
  .catch(function(err) 
    console.log(err)
  )

【讨论】：

嘿，成功了！谢谢你。我怀疑为什么我必须使用箭头功能而不是普通功能？我使用了 function 关键字，因为当我在箭头函数中编写所有内容时，getData: 不起作用，但是当我编写函数时它起作用了。我遗漏或不知道的概念是什么？

如果您想了解更多关于 this 关键字及其使用上下文的信息，请参阅 a good post 解释原因和方法。