[英]How to wait for API Call Data before next function is triggered?
[英]Vue wait for API call before loading data
所以我有一个这个 vue 组件,我正在使用 highcharts 并且我有一个 axios API 调用填充测试结果数组。我希望 chartoptions 变量等待 api 调用这是我到目前为止的代码
<template>
<div>
<highchart :options="chartOptions" />
<div>{{testresults}}</div>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
testresults: [],
loadAPI: false,
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: 'Visual Test results'
},
xAxis: {
categories: ['passed', 'failed', 'skipped']
},
series: [{
name: 'Results',
colorByPoint: true,
data: [{
name: 'passed',
y: this.testresults.pass,
sliced: true,
selected: true
}]
}]
}
}
},
async mounted() {
try {
const res = await axios.get(`http://localhost:3002/backend/getresults`);
this.testresults = res.data.data[0];
console.log(testresults)
} catch (error) {
console.log(error);
}
}
}
</script>
<style lang="scss" scoped>
</style>
我收到一个错误,它无法读取未定义传递的属性
多亏了@Lissy93,我发现我可以在 api 通话后使用finally
,我会为任何想知道这对我有用的人更新图表选项
<template>
<div>
<highchart :options="chartOptions" />
<div>{{testresults}}</div>
</div>
</template>
<script>
import axios from "axios"
export default {
data(){
return{
testresults:[],
loadAPI:false,
chartOptions:{}
}
},
async mounted() {
try {
const res = await axios.get(`http://localhost:3002/backend/getresults`);
this.testresults=res.data.data[0];
console.log(testresults)
}catch (error){
console.log(error);
}finally{
this.chartOptions={
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: 'Visual Test results'
},
xAxis: {
categories: ['passed','failed','skipped']
},
series: [{
name: 'Results',
colorByPoint: true,
data: [{ name: 'passed',
y: this.testresults.pass,
sliced: true,
selected: true}]
}]
}
}
},
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.