解决方法就是:async + await async声明方法为异步方法,await等待异步操作执行完。
(async函数return的是Promise,await Promise后得到Object)
注意的是,异步方法返回值为peomise<>,接收时需要.then(res=>{})
想要获取object里的数据则要使用.then().catch()方法才可以
Promise.resolve(response).then(() => {}).catch(() => {})
当我打印了返回的return 值发现 并没有直接返回我想要的数据,而是在Promise 内部。此时需要做处理。
let _that = thislet retrunPromise = showTimeEcharts(item, startTime, endTime, this.groupName, this.dataName, this.deviceIdList, _that)console.log(retrunPromise, 'retrunPromise');this.$nextTick(() => {Promise.resolve(retrunPromise).then((res) => {this.$nextTick(() => {this.$refs[`historicalLineEcharts${this.EchartsId}`] && this.$refs[`historicalLineEcharts${this.EchartsId}`].getEchartsLiving()this.$refs[`historicalLineEcharts${this.EchartsId}`] && this.$refs[`historicalLineEcharts${this.EchartsId}`].upDataEcharts(shearerOptions(res.list || [], res.params, this.dataInfos))})}).catch(() => {})})
封装的公共方法
当我封装完成后在内部打印发先我的数据能够拿到,但是return 的时候一直都市undefined.
原因是:因为axios是异步操作,在获取返回值时请求操作还没有完成就已经完成了赋值操作,所以结果的undefined。
此时则需要对其进行处理改装成异步,即加上 async 和await 就可以了
错误示范,打印有值,返回为空
解决:
export const showTimeEcharts = async (paramsInfo, startTime, endTime, groupName, dataName, deviceIdList, that) => {console.log(paramsInfo, startTime, endTime, groupName, dataName, deviceIdList, '00000');if (typeof startTime === 'undefined' && typeof endTime === 'undefined') {startTime = window.$dayjs().format('YYYY-MM-DD 00:00:00'),endTime = window.$dayjs().format('YYYY-MM-DD 23:59:59') // window.$dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00')}else{if(startTime === endTime){that.$message.warning('时间有误请重新操作')return}}let sit = paramsInfo?.dataType || paramsInfo?.siteif(sit){let newArr = sit?.split('/')if(newArr.length === 3){groupName = `${newArr[0]}` // 测点大类deviceIdList = `${newArr[1]}`*1 // 设备号dataName = `${newArr[2]}` // 测名称}}let params = {workFaceCode: window.$getStorage('workFaceInfo').workFaceCode,startTime, // : window.$dayjs().format('YYYY-MM-DD 00:00:00'),endTime, // : window.$dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00'),aggregateType : 'none', // 聚合类型 传none获取原始历史值groupName, // 测点大类dataName, // 测名称deviceIdList // 设备号}let list = []await window.$axiosGet('deviceHistory', params).then((res) => {if(!res.length){list = []return}list = res.map(item => {return item?.data})}).catch(() => {return []})return {list, params}
}
解决数据完美渲染。