当前位置: 首页 > news >正文

获取多个接口的数据并进行处理,使用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)})},

http://www.lryc.cn/news/184046.html

相关文章:

  • 利用C++开发一个迷你的英文单词录入和测试小程序-升级版本
  • 用c动态数组(实现权重矩阵可视化)实现手撸神经网络230902
  • Android.mk和Android.bp
  • CSS 常用样式-文本属性
  • BootstrapBlazor企业级组件库:前端开发的革新之路
  • 力扣 -- 1745. 分割回文串 IV
  • C# 给某个方法设定执行超时时间
  • 安装NodeJS并使用yarn下载前端依赖
  • (Java高级教程)第三章Java网络编程-第八节:博客系统搭建(前后端分离)
  • 901. 股票价格跨度
  • JavaScript中的模块化编程,包括CommonJS和ES6模块的区别。
  • 从零开始 Spring Cloud 13:分布式事务
  • 2023Node.js零基础教程(小白友好型),nodejs新手到高手,(二)NodeJS入门——buffer模块、计算机基础、fs模块、path模块
  • lua如何调用C/C++
  • 简单聊一聊公平锁和非公平锁,parallel并行流
  • 【SpringCloud】微服务技术栈入门4 - RabbitMQ初探
  • cefsharp(117.2.20)cef117.2.2最新体验版
  • layui在上传图片在前端处理图片压缩
  • js 事件参考
  • 卷积网络的发展历史-LeNet
  • (2023,GPT-4V,LLM,LMM,功能和应用)大型多模态模型的黎明:GPT-4V(ision) 的初步探索
  • 【C++设计模式之装饰模式:结构型】分析及示例
  • 绘制散点图、曲线图、折线图和环形图失败, 设置迭代次数和进度无法保存图片
  • micro-ROS中对消息的内存管理
  • Springboot中使用拦截器、过滤器、监听器
  • 代码随想录二刷day45
  • 泊车功能专题介绍 ———— AVP系统基础数据交互内容
  • 蓝桥杯每日一题2023.10.6
  • 7、【Qlib】【主要组件】Data Layer:数据框架与使用
  • Kubernetes安装部署 1