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

解决方法就是: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}
}

在这里插入图片描述

解决数据完美渲染。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【计算机网络】【练习题】【新加坡南洋理工大学】【Computer Control Network】

说明&#xff1a; 仅供学习使用。 一、题目描述 该题目描述一个网络中传播时延&#xff08;Transmission Delay&#xff09;的例子。题目如下&#xff1a; 二、问题解答&#xff08;个人&#xff09; 笔者第3问采用均值不等式求解。标答中采用求导数的方法求极值。似乎均值…

学术精选,EI检索2024年计算机应用系统与微芯片技术国际会议

2024年计算机应用系统与微芯片技术国际会议(ICCASMT 2024) 2024 International Conference on Computer Application Systems and Microchip Technology(ICCASMT 2024) 数据库&#xff1a;EI,CPCI,CNKI,Google Scholar等检索 一、【会议简介】 &#x1f514; ​2024年计算机应用…

JS之打地鼠案例

需要素材的同学可以私信我 效果图&#xff1a; 上代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 320px;heigh…

数据结构之树

树 前面文章讲的线性表&#xff0c;不论数组还是链&#xff0c;都是“一对一”的关系&#xff0c;本文章节让我们来认识一下“一对多”关系的数据结构——树&#xff08;Tree&#xff09;。 树结构分为二叉树和三叉树等&#xff0c;如下图所示。常用的就是二叉树&#xff0c;因…

深度学习(5)--Keras实战

目录 一.Keras基础概念 二.如何跑通Keras项目 2.1.在cmd上跑通 2.2.在PyCharm上跑通 一.Keras基础概念 Keras是深度学习中的一个神经网络框架&#xff0c;是一个高级神经网络API&#xff0c;用Python编写&#xff0c;可以在TensorFlow&#xff0c;CNTK或Theano之上运行。 …

如何保护电脑数据?电脑数据怎么保护?

电脑会储存大量的重要数据&#xff0c;而为了避免数据泄露&#xff0c;必须要使用专业的方式进行保护。那么&#xff0c;要如何保护电脑数据呢&#xff1f;下面我们就来了解一下。 文件夹加密超级大师 文件夹加密超级大师是一款专业的电脑数据加密软件&#xff0c;拥有强大的文…

医疗天使禅道使用工作流程:优化医疗服务的必经之路

目录 博客前言 医疗天使禅道使用工作流程 一.使用最高管理员账号admin管理组织结构 1.新增用户 产品经理使用禅道 1.创建产品 2.添加产品模块​编辑 3.添加产品计划 4.添加产品需求 5.创建项目 6.设置团队 项目经理使用禅道 1.关联需求 2.分解任务 测试主管使用禅…

200G数据中心:QSFP56和QSFP-DD光模块如何选择?

随着光通信与互联网技术的迅猛发展&#xff0c;网络数据流量的需求呈指数级增长&#xff0c;电信骨干网流量年均增速高达50%至80%。为了应对日益攀升的数据传输需求&#xff0c;光通信速率实现了从10G、25G、40G到当前主流的100G、200G、400G甚至更高规格的持续演进。 在此背景…

Linux-共享内存

文章目录 前言一、system V共享内存申请共享内存挂载共享内存删除共享内存挂载删除共享内存 二、示例代码三.运行效果 前言 在这之前我们已经学习了两种进程间通信方式&#xff1a;匿名管道和命名管道。 从我们之前的学习已经知道&#xff0c;想让多个进程间进行通信就需要让他…

前端JavaScript篇之intanceof 操作符的实现原理及实现、为什么0.1+0.2 ! == 0.3,如何让其相等

目录 intanceof 操作符的实现原理及实现为什么0.10.2 ! 0.3&#xff0c;如何让其相等 intanceof 操作符的实现原理及实现 instanceof 是一个用于检查对象是否属于特定类的 JavaScript 操作符。它返回一个布尔值&#xff0c;指示对象是否是特定类的实例或者原型链中是否存在该…

常见の算法

前言本文主要使用Java 什么&#xff0c;是快乐星球#&#xffe5;%……什么是算法&#xff1f; 算法是一组完成任务的指令。任何代码片段都可视为算法&#xff0c;但我们主要介绍常见算法 一、引入——二分查找 二分查找是一种算法&#xff0c;其输入是一个有序的元素列表。如…

浏览器实用:禁止浏览器http自动转成https

前言 因为有些网站支持http和https两种协议访问&#xff0c;有些只支持一种协议访问。但根据动态域名安全策略&#xff08;HSTS&#xff09;&#xff0c;只要该域名在浏览器中访问过一次https&#xff0c;那么浏览器将强制使http的请求变为https。 虽然这条浏览器的策略有利于提…

Flink入门教程

使用flink时需要提前准备好scala环境 一、创建maven项目 二、添加pom依赖 <properties><scala.version>2.11.12</scala.version></properties><dependency><groupId>org.scala-lang</groupId><artifactId>scala-library<…

携程基于Jira Cloud的敏捷项目管理实践

好的工具可以满足团队在各个成长阶段的管理诉求 实践一&#xff1a;对齐目标/团队OKR/多团队协作战略项目 实践二&#xff1a;以产品为中心的协作框架 实践三&#xff1a;交付团队管理 实践四&#xff1a;和海外子公司对齐&#xff0c;协作

在linux、window环境搭建kafka环境

一、搭建环境前置准备 下载kafka的官网 http://kafka.apache.org/downloads根据自己的需求选择版本,安装包不区分linux和windows环境,这一个安装包均可部署。 源代码包含kafka的代码文件,使用scala编写的。 二、linux环境 1. 上传安装包 我下载的版本是kafka_2.12-3.6.1…

09.Elasticsearch应用(九)

Elasticsearch应用&#xff08;九&#xff09; 1.搜索结果处理包括什么 排序分页高亮返回指定字段 2.排序 介绍 Elasticsearch支持对搜索结果排序&#xff0c;默认是根据相关度算分来排序 支持排序的字段 keyword数值地理坐标日期类型 排序语法 GET /[索引名称]/_sear…

网络协议与攻击模拟_08DHCP协议

技术学习要了解某项技术能干什么&#xff1f;它的详细内容&#xff1f;发展走向&#xff1f; 一、DHCP协议 1、DHCP基本概念 dhcp动态主机配置协议&#xff0c;广泛应用于局域网内部 主要是为客户机提供TCP/IP 参数&#xff08;IP地址、子网掩码、网关、DNS等&#xff09;…

5G赋能智慧文旅:科技与文化的完美结合,打造无缝旅游体验,重塑旅游业的未来

一、5G技术&#xff1a;智慧文旅的强大引擎 5G技术的起源可以追溯到2010年&#xff0c;当时世界各国开始意识到4G技术已经达到了瓶颈&#xff0c;无法满足日益增长的移动通信需求。2013年&#xff0c;国际电信联盟&#xff08;ITU&#xff09;成立了5G技术研究组&#xff0c;开…

超融合系统疑难故障定位与解决实践 3 例(含信创技术栈)

当 IT 系统出现故障&#xff0c;问题定位往往是运维人员最头疼的环节。尤其是超融合系统&#xff0c;由于整体涉及的技术栈比较复杂&#xff0c;且有越来越多的用户基于信创环境进行部署&#xff0c;非常考验厂商和技术人员的专业能力&#xff1a;厂商研发和售后工程师不仅应能…

[pytorch入门] 6. 神经网络

基本介绍 torch.nn&#xff1a; Containers&#xff1a;基本骨架Convolution Layers&#xff1a; 卷积层Pooling layers&#xff1a;池化层Non-linear Activations (weighted sum, nonlinearity)&#xff1a;非线性激活Normalization Layers&#xff1a;正则化层 Container…