等所有接口异步调用完成后再执行如何实现 使用async await
2023-09-11 14:21:24 时间
需求:initChart()初始化图表方法要在前面四个异步调用全部完成获取到数据后再执行~
话不多说,直接上代码:
created() {
this.fetchAllInterface();
},
methods: {
async fetchAllInterface() {
await this.getUserTotal();
await this.getBookTotal();
await this.getSeatItemTotal();
await this.getRentalTotal();
this.initChart();
},
initChart() {
let myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: '统计'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['今日借阅数', '今日预约数', '图书数', '用户数'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
barWidth: '25%',
data: [
{
value: this.rentalTotal,
itemStyle: { color: '#5470c6' }
},
{
value: this.seatItemTotal,
itemStyle: { color: '#91cc75' }
},
{
value: this.bookTotal,
itemStyle: { color: '#fac858' }
},
{
value: this.userTotal,
itemStyle: { color: '#ee6666' }
}
]
}
]
})
},
getUserTotal() {
return this.$ajax.post("/user/total").then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.userTotal = resp.data;
}
});
},
getBookTotal() {
return this.$ajax.post("/book/total").then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.bookTotal = resp.data;
}
});
},
getSeatItemTotal() {
return this.$ajax.post("/seat/dayTotal").then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.seatItemTotal = resp.data;
}
});
},
getRentalTotal() {
return this.$ajax.post("/book/dayTotal").then((response)=>{
let resp = response.data;
if(resp.code === 0){
this.rentalTotal = resp.data;
}
});
}
}
注意点: axios异步调用记得return返回,要不然await不生效。
相关文章
- [转] Java接口_interface_implements
- 接口方法执行时的查找顺序
- 接口自动化测试中解决接口间数据依赖
- 技术分享 | 实战详解接口测试请求方式Get、post
- Jmeter接口测试流程详解(中科软测认证中心)
- MyBatis 接口的使用
- 架构设计 | 接口幂等性原则,防重复提交Token管理
- 详解C#泛型(二) 获取C#中方法的执行时间及其代码注入 详解C#泛型(一) 详解C#委托和事件(二) 详解C#特性和反射(四) 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码
- Laravel设计RBAC权限管理出API接口
- 用了国产接口管理神器 Apifox 之后,我果断从 Postman “脱坑”了
- 接口测试系列——转转接口测试平台实践
- Python接口测试实战之搭建自动化测试框架
- Spring的接口InitializingBean、BeanPostProcessor以及注解@PostConstruct、bean的init-method的执行先后顺序
- 第十八节:详解Java抽象类和接口的区别
- 第五节:详细讲解Java中的接口与继承
- TLSR8258方案开发之BLE协议接口代码解析
- JAVA接口继承、抽象类等
- arduino使用 TCA9845A芯片 扩展IIC接口 驱动多路OLED案例
- 微信小程序 获取小程序码和二维码java接口开发
- Egg:使用joi进行参数校验以及注册接口小demo