获取多个接口的数据并进行处理,使用Promise.all来等待所有接口请求完成
Promise.all (等待机制) 方法
它调用了多个函数,这些函数返回了Promise对象,每个Promise对象代表了一个异步操作。
然后,使用Promise.all将这多个Promise对象包装成一个新的Promise对象,它会等待所有的Promise都完成(或者其中一个被拒绝)。
当所有的Promise都成功完成时,Promise.all的.then方法会被触发,传入一个数组参数,包含了每个Promise成功时的结果。
接下来,你可以在.then方法的回调函数中使用这些数据,进行后续的操作或处理。这段代码的目的是等待这几个异步操作都完成后再继续执行后续代码,以确保所有数据都可以同时渲染。
Promise.race (
赛跑机制)
1、business.js接口文件内定义接口
const getTotalUserone = (params) =>getAction('/admin/consumer/totalUserone', params)
const getTotalUsertwo = (params) =>getAction('/admin/consumer/totalUsertwo', params)
const getTotalUserthree = (params) =>getAction('/admin/consumer/totalUserthree', params)
const getTotalUserfour = (params) =>getAction('/admin/consumer/totalUserfour', params)
const getTotalUserfive = (params) =>getAction('/admin/consumer/totalUserfive', params)
2、页面中导入接口
import {getTotalUserone,getTotalUsertwo,getTotalUserthree,getTotalUserfour,getTotalUserfive,areaTypeLists,} from '@/api/business'
3、调用初始化函数
created() {this.initData()},
4、调用接口,获取数据
initData() {// 定义多个接口请求的Promiseconst areaTypeData = areaTypeLists()const getline2Data = getTotalUserone()const getbar1Data = getTotalUsertwo()const getbar2Data = getTotalUserthree()const getpie1Data = getTotalUserfour()const getpie2Data = getTotalUserfive()// 使用Promise.all来等待所有接口请求完成Promise.all([areaTypeData,getline2Data,getbar1Data,getbar2Data,getpie1Data,getpie2Data,]).then(([areaTypeData,getline2Data,getbar1Data,getbar2Data,getpie1Data,getpie2Data,]) => {// 将这些数据分别赋值给相应的变量或对象属性// 逻辑操作,筛选过滤数据等}).catch((error) => {console.error(error)})},
相关文章:
获取多个接口的数据并进行处理,使用Promise.all来等待所有接口请求完成
Promise.all (等待机制) 方法 它调用了多个函数,这些函数返回了Promise对象,每个Promise对象代表了一个异步操作。 然后,使用Promise.all将这多个Promise对象包装成一个新的Promise对象,它会等待所有的Promise都完成(或…...
利用C++开发一个迷你的英文单词录入和测试小程序-升级版本
我们现在有了一个本地sqlite3的迷你英文单词小测试工具,需求就跟工作当中一样是不断变更的。这里虚构两个场景,并且一步一步的完成最终升级后的小demo。 场景:数据不依赖本地sqlite3,需要支持远程访问,用目前的restfu…...
用c动态数组(实现权重矩阵可视化)实现手撸神经网络230902
变量即内存、指针使用的架构原理: 1、用结构struct记录 网络架构,如 float*** ws 为权重矩阵的指针(指针地址); 2、用 = (float*)malloc (Num * sizeof(float)) 给 具体变量分配内存; 3、用 = (float**)malloc( Num* sizeof(float*) ) 给 指向 具体变量(一维数组)的…...
Android.mk和Android.bp
公司承接Android、iOS等APP开发、前后端网站开发、小程序开发、安全服务等项目! 公司官网:www.bincodesec.com 项目案例 一、编译不同类型的模块 1.编译成Java库 Android.mk include $(BUILD_JAVA_LIBRARY)Android.bp java_library {} 2.编译成Java静态库 And…...
CSS 常用样式-文本属性
一、水平对齐 text-align CSS中的text-align属性用于水平对齐文本。它可以应用于块级元素和表格单元格。 常见的属性值包括: left:左对齐,文本在容器的左侧。right:右对齐,文本在容器的右侧。center:居中…...
BootstrapBlazor企业级组件库:前端开发的革新之路
作为一名Web开发人员,开发前端我们一般都是使用JavaScript,而Blazor就是微软推出的基于.Net平台交互式客户Web UI 框架,可以使用C#替代JavaScript,减少我们的技术栈、降低学习前端的成本。 而采用Blazor开发,少不了需…...
力扣 -- 1745. 分割回文串 IV
解题步骤: 参考代码: class Solution { public:bool checkPartitioning(string s) {int ns.size();vector<vector<bool>> dp(n,vector<bool>(n));for(int in-1;i>0;i--){for(int ji;j<n;j){if(s[i]s[j]){dp[i][j]i1<j?dp[i…...
C# 给某个方法设定执行超时时间
C# 给某个方法设定执行超时时间在某些情况下(例如通过网络访问数据),常常不希望程序卡住而占用太多时间以至于造成界面假死。 在这时、我们可以通过Thread、Thread Invoke(UI)或者是 delegate.BeginInvoke 来避免界面假死, 但是…...
安装NodeJS并使用yarn下载前端依赖
文章目录 1、安装NodeJS1.1 下载NodeJS安装包1.2 解压并配置NodeJS1.3 验证是否安装成功2、使用yarn下载前端依赖2.1 安装yarn2.2 使用yarn下载前端依赖参考目标:在Windows下安装新版NodeJS,并使用yarn下载前端依赖,实现运行前端项目。 1、安装NodeJS 1.1 下载NodeJS安装包…...
(Java高级教程)第三章Java网络编程-第八节:博客系统搭建(前后端分离)
文章目录 一:前端页面回顾二:博客功能展示三:数据库表设计(1)表设计(2)封装DataSource 四:实体类和数据访问对象(1)实体类(2)数据访问…...
901. 股票价格跨度
设计一个算法收集某些股票的每日报价,并返回该股票当日价格的 跨度 。 当日股票价格的 跨度 被定义为股票价格小于或等于今天价格的最大连续日数(从今天开始往回数,包括今天)。 例如,如果未来 7 天股票的价格是 [100,…...
JavaScript中的模块化编程,包括CommonJS和ES6模块的区别。
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 模块化编程概述⭐ CommonJS 模块⭐ ES6 模块⭐ 区别⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、…...
从零开始 Spring Cloud 13:分布式事务
从零开始 Spring Cloud 13:分布式事务 1.分布式事务问题 用一个示例项目演示在分布式系统中使用事务会产生的问题。 示例项目的 SQL:seata_demo.sql 示例项目代码:seata-demo.zip 这个示例项目中的微服务的互相调用依赖于 Nacos…...
2023Node.js零基础教程(小白友好型),nodejs新手到高手,(二)NodeJS入门——buffer模块、计算机基础、fs模块、path模块
就算步子乱了又如何,接着跳下去就好了。——《闻香识女人》 开始 011_Buffer_介绍与创建 hello,大家好,我们来学习一下buffer。首先来看看 buffer 是一个什么东东。buffer,中文译为缓冲区,是一个类似于数组的对象&am…...
lua如何调用C/C++
1 lua vs C/C lua是脚本语言,优点是门槛低,可以热更新,缺点当然就是性能。C/C是编译型语言,有点是性能高,但是相对的,门槛高,技术不好的人写的代码可能还没有lua的性能高,容易出现c…...
简单聊一聊公平锁和非公平锁,parallel并行流
目录 一、降低锁的粒度,将synchronized关键字不放在方法上了,改为synchronized代码块。二、先区分一下公平锁和非公平锁1、公平锁2、非公平锁3、公平锁的优缺点:4、非公平锁的优缺点: 三、是否对症下药四、IntStream.rangeClosed是…...
【SpringCloud】微服务技术栈入门4 - RabbitMQ初探
目录 RabbitMQ安装 rabbitmqSpringAMQP 基础队列WorkQueue路由发布订阅 FanoutExchangeDirectExchangeTopicExchange RabbitMQ 安装 rabbitmq 首先确保自己已经安装好了 docker 是 docker 拉取镜像文件:docker pull rabbitmq:3-management 拉取完毕,打…...
cefsharp(117.2.20)cef117.2.2最新体验版
一、下载nupkg https://www.nuget.org/packages/CefSharp.WinForms/ https://www.nuget.org/packages/CefSharp.Common/ https://www.nuget.org/packages/cef.redist.x64/ https://www.nuget.org/packages/cef.redist.x86/ 此版本暂时不支持H264。上一版本支持H264 cefsharp…...
layui在上传图片在前端处理图片压缩
有的人会遇到需要在前端代码处理图片压缩的问题,下面给大家分享怎么处理。 // 上传图片 var image_src var IsImgDealfalse; layui.upload.render({ elem: "#{tag}{id}", url: sessionStorage.getItem(httpUrlPrefix) /upload/uploadImage, // dataT…...
js 事件参考
事件参考 事件介绍 触发事件是为了通知代码可能影响代码执行的“有趣变化”。这些可能来自用户交互,例如使用鼠标或调整窗口大小,底层环境状态的变化(例如,低电量或来自操作系统的媒体事件)以及其他原因。 每个事件都由一个基于Event接口的…...
LinkSwift:九大网盘直链解析工具使用指南
LinkSwift:九大网盘直链解析工具使用指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / 迅雷云…...
TrollInstallerX终极指南:iOS 14-16.6.1系统一键安装TrollStore的完整教程
TrollInstallerX终极指南:iOS 14-16.6.1系统一键安装TrollStore的完整教程 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX TrollInstallerX是一款专为iOS 14…...
抖音无水印下载工具:3分钟学会高效保存视频资源
抖音无水印下载工具:3分钟学会高效保存视频资源 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖…...
终极免费解锁:3步获取WeMod专业版完整功能
终极免费解锁:3步获取WeMod专业版完整功能 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer Wand-Enhancer是一款专为WeMod用户设计的开源增强…...
认知神经科学研究报告【20260042】
文章目录ForeSight 5.87.4 多元时间序列预测 — 测试报告ForeSight 5.87.4 多元时间序列预测 — 测试报告 测试目标:让系统从数据中自动发现变量之间的因果关系和预测模型,不预设任何模型结构。 测试数据:500个时间点的模拟经济数据&#x…...
大模型多维度评估体系构建指南:从SITS大会带回的4层漏斗式评估矩阵(含Prompt一致性校准模块)
更多请点击: https://intelliparadigm.com 第一章:大模型A/B测试方法:SITS大会 在2024年SITS(Scalable Intelligence Testing Summit)大会上,工业界首次系统性地提出了面向大语言模型的A/B测试新范式——*…...
[具身智能-636]:什么是语音识别?语音识别的技术过程?语音于语音特征提取?什么环节实现时域到频域的转化?
一、什么是语音识别语音识别 ASR:把人说话的语音声波(时域音频),自动转换成文字的技术。本质:时域语音信号 → 机器可懂的语音特征 → 文本。不关心声音多好听,只关心说了什么内容。二、语音识别完整技术流…...
GEO Optimizer实战:AI搜索时代网站可见性优化指南
1. 项目概述:为什么你的网站在AI搜索时代可能“隐形” 如果你还在用传统的SEO思维来优化网站,觉得只要在Google上排名靠前就万事大吉,那你的内容很可能正在错过一个全新的流量入口——AI搜索。想象一下,当用户向ChatGPT、Claude或…...
企业级智能地址解析架构:高并发场景下的Java解决方案
企业级智能地址解析架构:高并发场景下的Java解决方案 【免费下载链接】address-parse Java 版智能解析收货地址 项目地址: https://gitcode.com/gh_mirrors/addr/address-parse 在电商、物流、金融等数字化业务高速发展的今天,地址数据的标准化处…...
具身智能新突破:AI驱动机器人迈向真实世界
抱歉,未能检索到过去24小时内符合您特定偏好(具身智能、机器人、芯片、大模型)的10条高影响力科技新闻。这可能是因为当前时间段内相关领域的重大突破性新闻较少,或者全网实时数据源暂时未更新。不过,基于近期的行业趋…...
