vue 异步渲染
昨天遇到一个事,项目里之前的同事留下了一个定时器,在ajax请求后,接了个定时器,异步调用,保证数据全部接受后再渲染数据,然后被组长看到了,把我们说了一顿,叫我们把前端代码里遇到的所有定时器全部改掉。那改成什么呢,怎么改呢。我也是个菜鸟,说实话,我定时器都
没怎么用过,平时ajax请求,除了数据特别多的情况,基本没用到什么需要重新渲染的场景,于是我又开始了面向百度编程。找到了几种解决方法,晚上写篇博客,记录一下。
问题代码
第一种,不需要定时器的方法
/**
* 选中
*/
//这是一段列表选中,添加到选中列表的方法
//下面说说这段代码的问题
chooseInfo(row) {
let self = this
for (let item of self.materialTableDate) {
if (row.id === item.id) {
self.$message.error('不能重复选择')
return
}
}
//每次选中都需要调用两个接口 而且重复调用 ,在数量不大的情况下 应该抽取出来,写成list 这样减少数据库读写
if (isNotNull(row.supplierId)) {
getSupplier(row.supplierId, true).then(data => {
var supplier = data.result
self.supplierName = supplier.name
})
}
let param = {
code: consts.CODE_226,
decode: row.code
}
getCodeName(param).then(data => {
var codeLisy = data.result
self.unitName = codeLisy[0].decodeValue
})
let temp = {
id: row.id,
materialCode: row.code,
materialId: row.id,
stockQuantity: null,
name: row.name,
supplierName: this.supplierName,
specModel: row.code,
unitName: null,
shelfLife: row.shelfLife,
grossWeight: row.grossWeight,
netWeight: row.netWeight,
productDate: null,
expiringDate: null,
remark: null,
warehouseId: null
}
//判断是否为第一条的原因是第一条是有添加按钮的,所有在初始化时,没有数据的时候,给第一条添加了空数据
if (!self.materialTableDate[0].id || self.materialTableDate[0].id === 'undefined') {
setTimeout(() => {