[英]How can i call a Rest API from a Vue component?
我刚刚开始使用 VueJS,我正在尝试创建一个非常简单的页面,其中显示了带有一些数据的饼图。
现在,我设法使用示例数据显示图表,但现在我想用从我的后端http://127.0.0.1:8000/user/getamount
上的 api 调用检索到的数据填充图表。
这是我的代码:
chart.js
import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import HighchartsVue from "highcharts-vue";
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
Vue.use(VueAxios, axios)
new Vue({
el: "#app",
render: h => h(App),
});
应用程序.vue
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
</div>
</template>
<script>
export default {
data() {
return {
chartOptions: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 76.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
}
};
}
};
</script>
我刚开始使用 Vue,所以很多东西还不清楚,但是我应该在哪里执行 API 请求? 我见过很多例子,其中 axios 用于调用 API 并在页面上显示数据,但在这种情况下,我需要组件上的数据,因为图表就在那里。 我应该只执行来自组件的调用吗? 还是我错过了什么? 任何形式的建议表示赞赏
由于您仍将加载数据,因此定义它但启动变量null
:
series: [{
type: 'pie',
name: 'Browser share',
data: null
}],
在created
(标记为async
for async/await 模式)中,使用axios
加载数据:
import axios from 'axios';
export default {
data() {
...
},
async created() {
const response = await axios.get(...); // Load the data from your api url
this.chartOptions.series[0].data = response.data; // set the data
// `response.data` should contain:
/*
[
['Firefox', 45.0],
['IE', 76.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
*/
}
}
这是一个用setTimeout
模拟的沙箱
import axios from 'axios';
data () {
return {
getAmount: []
}
},
methods: {
fetch() {
axios.get('https://127.0.0.1:8000/user/getamount')
.then((response) => {
this.getAmount = response.data;
})
}
},
mounted() {
this.fetch();
}
})
如果你想在 html 中显示它,那么你做一个循环。
<div v-for="amount in getAmount" :key="amount.id">
{{amount}}
</div>
您只需在需要加载数据的新组件中定义 function 即可。 所以是的,如果是您的图表组件,您可以在那里提出 Axios 请求。 所以脚本部分看起来像这样。
<script>
import axios from 'axios';
export default {
data () {
return {
graph_data: [],
}
},
created () {
this.fetchGraphData()
},
methods: {
fetchGraphData() {
axios.get('your_address')
.then(function (response) {
//Fill your data here
})
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.