前端 .then 返回有数据但是return 不出来，并解决处理后的 Promise下的Object

最新推荐文章于 2024-02-01 22:19:49 发布

小刘先生很努力

最新推荐文章于 2024-02-01 22:19:49 发布

阅读量1.1k

点赞数 9

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/lzfengquan/article/details/135841265

版权

文章讲述了在JavaScript中使用async/await处理axios异步请求的问题，如何确保数据在异步操作完成后返回并正确渲染到图表。作者分享了错误示例和解决方案，强调了在axios异步调用中正确使用async和await的重要性。

摘要由CSDN通过智能技术生成

解决方法就是：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 = this
  let 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?.site
  if(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}
}

在这里插入图片描述