const res = await Promise.all(formVnodeList.value.map(item => item.validate())).then(res => { console.log(res, 'res') return res.every(value => value) }) 我想修改成在表单验证后用ElMessage信息提示什么没填
时间: 2023-12-18 15:02:24 浏览: 71
你可以尝试以下代码:
```
const res = await Promise.all(formVnodeList.value.map(item => item.validate())).then(res => {
const isValid = res.every(value => value);
if (!isValid) {
this.$message({
type: 'error',
message: '请完善表单信息'
});
}
return isValid;
})
```
这样如果有任何一个表单项验证不通过,就会弹出提示信息。如果所有表单项都验证通过,则返回 `true`。
相关问题
const getClassifyData = ()=>{ let pararms = {name: nodeLable.value} getClassify(pararms).then(res=>{ TypeSelects.value = res.result if(parId.value){ return getClassify({classId:parId.value}) } }).then(res=>{ childOptions.value = res.result if(claId.value){ return getClassify({ indexId: claId.value }) } }).then(res=>{ lastResult.value = res.result tableData.value = res.result.map(obj => { const dashIndex = obj.indexFinalName.indexOf("-"); const dataType = obj.indexFinalName.substring(0, dashIndex) + "-基础数据"; return { ...obj, dataType }; }) }).catch(error=>{ console.log('error', error) }) }改进代码
这段代码可以进行一些改进,例如:
1. 使用 async/await 替代 Promise 的 then() 和 catch() 方法,使代码更易读。
2. 将函数参数改为传入 pararms 对象,使代码更灵活。
3. 使用 try/catch 捕获错误,而不是使用 catch() 方法。
改进后的代码如下:
```
const getClassifyData = async (params) => {
try {
const res1 = await getClassify({ name: params.name });
TypeSelects.value = res1.result;
if(params.parId){
const res2 = await getClassify({ classId: params.parId });
childOptions.value = res2.result;
if(params.claId){
const res3 = await getClassify({ indexId: params.claId });
lastResult.value = res3.result;
tableData.value = res3.result.map(obj => {
const dashIndex = obj.indexFinalName.indexOf("-");
const dataType = obj.indexFinalName.substring(0, dashIndex) + "-基础数据";
return { ...obj, dataType };
});
}
}
} catch (error) {
console.log('error', error);
}
}
```
这样就可以更简洁地实现同样的功能,并且代码更易读。
优化精简这段代码// pages/Stores/Stores.js // 请求封装 import request from '../../utils/request' // 高德地图 import amapFile from '../../libs/amap-wx.130' // 地图实例 var myAmapFun Page({ data: { map: [] }, onLoad(options) { console.log(options) const that = this wx.createWACode({ path: '/pages/index/index', width: 430, scene: 'custom_value' }).then(res => { // 在页面中显示生成的小程序码 this.setData({ qrcodeUrl: res.path }); }).catch(err => { console.error(err); }); myAmapFun = new amapFile.AMapWX({ key: '5409c5fd8a9d2c7dfecef1faa8cd3ffc' }); wx.getLocation({ type: 'wgs84', isHighAccuracy: true, success(res) { that.setData({ latitude: res.latitude, longitude: res.longitude, speed: res.speed, accuracy: res.accuracy }) request( '/stores/stores', {}, 'POST').then(res => { that.setData({ map: res.data, }) that.calculateDistance() }) } }) }, // 计算附近门店距离 calculateDistance() { const that = this; const mapVar = JSON.parse(JSON.stringify(that.data.map)); const promises = []; mapVar.forEach(item => { const origin = that.data.longitude + ',' + that.data.latitude; const destination = item.longitude + ',' + item.latitude; const promise = new Promise((resolve, reject) => { myAmapFun.getDrivingRoute({ origin: origin, destination: destination, success: function (data) { item.distance = Math.round(data.paths[0].distance / 100) / 10; resolve(); }, fail: function (err) { reject(err); } }); }); promises.push(promise); }); Promise.all(promises).then(() => { that.setData({ map: mapVar }); console.log(that.data.map) }).catch(err => { console.error(err); }); }, onShareAppMessage() { return { title: '分享标题', path: '/pages/index/index?custom_param=custom_value' }; } })
下面是对代码的优化和精简:
1. 对于使用频率较高的导入模块,可以将其放在全局变量中,避免在每次使用时都要重新导入。
2. 对于重复使用的变量,可以使用 const 声明变量,避免变量被无意中修改。
3. 对于异步请求,可以使用 async/await 语法糖,让代码更加清晰易读。
4. 对于重复调用的函数,可以将其封装成工具函数,提高代码的复用性。
5. 对于大量的 Promise 链式调用,可以使用 Promise.all() 方法,同时处理多个 Promise 对象,避免产生大量的嵌套。
优化后的代码如下:
```js
import request from '../../utils/request'
import amapFile from '../../libs/amap-wx.130'
const myAmapFun = new amapFile.AMapWX({
key: '5409c5fd8a9d2c7dfecef1faa8cd3ffc'
})
Page({
data: {
qrcodeUrl: '',
map: []
},
async onLoad(options) {
const { longitude, latitude } = await this.getLocation()
const map = await this.getNearbyStores()
this.setData({
map,
...{ longitude, latitude },
qrcodeUrl: await this.createWACode()
})
await this.calculateDistance()
},
// 获取用户当前位置信息
getLocation() {
return new Promise((resolve, reject) => {
wx.getLocation({
type: 'wgs84',
isHighAccuracy: true,
success(res) {
resolve({
longitude: res.longitude,
latitude: res.latitude
})
},
fail(err) {
reject(err)
}
})
})
},
// 获取附近的门店信息
getNearbyStores() {
return request('/stores/stores', {}, 'POST').then(res => {
return res.data
})
},
// 生成小程序码
createWACode() {
return wx.createWACode({
path: '/pages/index/index',
width: 430,
scene: 'custom_value'
}).then(res => {
return res.path
}).catch(err => {
console.error(err)
})
},
// 计算附近门店距离
calculateDistance() {
const { longitude, latitude, map } = this.data
const mapVar = JSON.parse(JSON.stringify(map))
const promises = mapVar.map(item => {
const origin = `${longitude},${latitude}`
const destination = `${item.longitude},${item.latitude}`
return new Promise((resolve, reject) => {
myAmapFun.getDrivingRoute({
origin,
destination,
success(data) {
item.distance = Math.round(data.paths[0].distance / 100) / 10
resolve()
},
fail(err) {
reject(err)
}
})
})
})
return Promise.all(promises).then(() => {
this.setData({ map: mapVar })
console.log(this.data.map)
}).catch(err => {
console.error(err)
})
},
onShareAppMessage() {
return {
title: '分享标题',
path: '/pages/index/index?custom_param=custom_value'
}
}
})
```
阅读全文