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 文件