vue的异步操作
tip:在vue的使用中,发送请求后,.then()操作是异步进行的。其实不是vue才有,这个问题应该是JS的异步问题。
这次通过一个接口请求后,获得相应的**“商品列表”并展示,但是,在展示之前,想要再次去查询该商品列表里的商品,是否已有“采购记录”。这时候需要将“商品列表”中的“商品编号”去查询相应的“采购记录”并操作数组。也就是在第一个查询.then()里,在次去进行查询。这时候就有了异步。.then()之后获取不到第二次查询后进行“添加新元素操作”的值,并进行是否可以删除商品**的操作(有采购记录的商品,禁止删除,按钮不可点击)。
其实该需求在后端接口优化返回给前端vue直接访问获取就行,正好不想改后端,就试了一下vue中两次访问并进行元素添加效果。
后端
有两个接口:
- 商品列表接口(商品id、商品编号、商品详细信息等)
- 采购记录(采购记录id、采购合同名称、商品编号、采购记录其他信息等)
前端
想要实现的是在渲染该**“商品列表”页面时,能知道商品是否已有“采购记录”,如果有了,就禁止“删除”该商品,如果没有,就可以删除**
)
考虑和尝试之后,使用async和await解决异步问题,在方法和**.then()里使用async**,在需要进行同步操作的地方使用await,表示需要等待await后面的执行完成。可以参考Vue中使用async/await解决异步请求问题 - Judicious - 博客园 (cnblogs.com)了解解释。
直接上代码了
// 方法使用async
async getshoplist(page, size, desc, search) {
this.loading=true
// 查询商品
commodity({
page: page,
size: size,
sort: desc,
chineseName: search,
// then里使用async
}).then(async (res) => {
this.loading = false
let temp = res.content;
// 查询是否有采购记录
for (let i = 0; i < temp.length; i++) {
// 需要执行同步完成的地方使用await
await queryPurchaseContract({
commodityNumber: temp[i].commodityNumber,
}).then(async (res) => {
// 添加新属性
if (res.length != 0) {
//有采购记录
temp[i].haveContract = 1;
//无采购记录
} else {
temp[i].haveContract = 0;
}
});
}
// 如果不使用async和await,这里的temp中会没有haveContract的值
this.dataList = temp;
this.total = res.totalElements;
});
},
在不使用async和await的时候,这个里面会异步,外面的this.dataList = temp;会一起执行,这样就造成在渲染的时候,无法得到haveContract 的值。
.then(async (res) => { // 添加新属性 if (res.length != 0) { //有采购记录 temp[i].haveContract = 1; //无采购记录 } else { temp[i].haveContract = 0; } });
进行判断:disabled=“scope.row.haveContract==1”
<el-table-column label="操作" width="150px" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="primary" @click="bianji(scope.row)">编辑</el-button>
<el-button type="danger" @click="remove(scope.row.commodityId)" :disabled="scope.row.haveContract==1">删除</el-button>
</template>
</el-table-column>
—————————————————————
作为初学者,很多前端的知识都没有掌握,见谅,如有错误请指出,以期进步,感谢!。后续有新的学习,继续补充上来。