Laravel 5.7 - 如何使用 axios.get 从 API 检索数据?

Posted

技术标签:

【中文标题】Laravel 5.7 - 如何使用 axios.get 从 API 检索数据?【英文标题】:Laravel 5.7 - How to retrieve data from an API with a axios.get? 【发布时间】:2019-07-19 14:31:31 【问题描述】:

我正在尝试从 Laravel Vue 组件中的 API 获取数据。 我在控制台中收到此错误:

TypeError: 无法设置未定义的属性“大陆”

我错过了什么?

这是我的代码:

<script>
    export default 
        mounted() 
            console.log('Component mounted.');
        ,
        created()
            this.loadData();
        ,
        data()   
            return 
                continents: [],
            
       ,
       methods: 
            loadData: function() 
                axios.get('/api/continents')
                  .then(function (response) 
                    // handle success
                    console.log(response.data);
                    this.continents = response.data;
                  )
                  .catch(function (error) 
                    // handle error
                    console.log(error);
                  )
                  .then(function () 
                    // always executed
                  );
            ,       
        ,  
    
</script>

【问题讨论】:

【参考方案1】:

您应该在调用中使用箭头函数,因为 this 的实例在您的 .then 的 promise 函数中不可用。因此尝试如下。

阅读更多关于箭头函数的信息here .

methods: 
        loadData: function() 
            axios.get('/api/continents')
              .then((response) => 
                // handle success
                console.log(response.data);
                this.continents = response.data;
              )
              .catch(function (error) 
                // handle error
                console.log(error);
              )
              .then(function () 
                // always executed
              );
        ,       
    ,  

【讨论】:

【参考方案2】:

这是axios.get请求的简单工作演示

var app = new Vue(
  el: '#app',
  data: 
    users:[]
  ,
  mounted()
     this.loadData();
  ,
  methods:
     loadData:function()
  axios.get('https://jsonplaceholder.typicode.com/users').then(res=>
       if(res.status==200)
         this.users=res.data;
       
     ).catch(err=>
         console.log(err)
     );
     
  
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
 <ol>
    <li v-if="users.length>0" v-for="user in users">
       user.name 
    </li>
  </ol>
</div>

【讨论】:

【参考方案3】:

在方法中,您必须在回调函数中使用箭头函数语法,以保持您的数据属性可访问。 当您使用正常语法声明函数时,您添加了一个“子范围”,并且回调中的 this.components 引用了回调函数中的“this”。

将您的方法更改为:

loadData() 
            axios.get('/api/continents')
              .then((response) => 
                // handle success
                console.log(response.data);
                //now this refers to your vue instance and this can access you data property
                this.continents = response.data;
              )
              .catch((error) => 
                // handle error
                console.log(error);
              )
              .then(() => 
                // always executed
              );
        ,  

【讨论】:

以上是关于Laravel 5.7 - 如何使用 axios.get 从 API 检索数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何修复“文件上传失败。”使用任何图像上传验证时出错 - Laravel 5.7

如何在 Laravel 5.7 和 Laravel Collective 中使用动作 [重复]

如何使用 laravel 5.7 和 vue JS 在 mysql 中导入 excel 文件

如何在同一个 laravel 应用程序上通过 laravel 护照安全地使用 axios

如何在 Laravel 5.7 中生成 JWT 刷新令牌

如何在 Vue 和 Laravel 中使用 axios 上传图像文件和数据对象?