[英]Correct syntax for importing axios method in Vue js
我试图通过导入它们而不是直接在创建的钩子中调用它来将我的axios调用与我的主vue实例分开。
我在一个名为data.js的单独文件中有这个
import axios from 'axios'
export default{
myData() {
return axios.get(`http://localhost:8080/data.json`)
.then(response => {
// JSON responses are automatically parsed.
return response.data;
})
.catch(e => {
return this.myErrors.push(e)
});
},
在我的vue实例中,我有以下内容:
import myDataApi from '@/api/data.js'
export default {
name: 'app',
components: {
myDataApi, // not sure if this is correct
},
data: function () {
return {
myInfo: '',
}
},
created() {
this.myInfo = myDataApi.myData();
console.log('this.myInfo= ', this.myInfo)
},
我试图用myData调用的json填充myInfo。 这将返回Vue devtools中的[object Promise]
和控制台中的Promise {<pending>}
。
我需要的所有数据都在一个名为[[PromiseValue]]:Object
的数组中的Promise {<pending>}
内[[PromiseValue]]:Object
所以我知道它正在工作,我只需要知道实现它的正确方法。
我目前没有启用开发环境来测试它,但我注意到您正在尝试在组件初始化时分配变量。 这个对象是一个承诺,但是在您导入它的组件内部解析后,您不会处理它。
我建议尝试处理实际组件内部的承诺,例如:
import myDataApi from '@/api/data.js'
export default {
name: 'app',
components: {
myDataApi, // not sure if this is correct
},
data: function () {
return {
myInfo: '',
}
},
created() {
myDataApi.myData()
.then((data) => {
this.myInfo = data
console.log('this.myInfo= ', this.myInfo);
});
.catch((e) => handleError) // however you want to handle it
},
只是添加到@LexJacobs的答案。 我省略了.then()中数据的括号,如下所示。 Vue正在咆哮着即使有数据也无法获得数据。 这解决了这个问题,虽然老实说我不知道为什么。
myDataApi.myData()
.then(data => {
this.dataHasLoaded = true;
this.myInfo = data;
})
.catch(e => {
this.myErrors.push(e)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.