码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 获取多个接口的数据并进行处理,使用Promise.all来等待所有接口请求完成


    Promise.all (等待机制) 方法

    它调用了多个函数,这些函数返回了Promise对象,每个Promise对象代表了一个异步操作。

    然后,使用Promise.all将这多个Promise对象包装成一个新的Promise对象,它会等待所有的Promise都完成(或者其中一个被拒绝)。

    当所有的Promise都成功完成时,Promise.all的.then方法会被触发,传入一个数组参数,包含了每个Promise成功时的结果。

    接下来,你可以在.then方法的回调函数中使用这些数据,进行后续的操作或处理。这段代码的目的是等待这几个异步操作都完成后再继续执行后续代码,以确保所有数据都可以同时渲染。

     Promise.race (赛跑机制)

    1、business.js接口文件内定义接口

    1. const getTotalUserone = (params) =>
    2. getAction('/admin/consumer/totalUserone', params)
    3. const getTotalUsertwo = (params) =>
    4. getAction('/admin/consumer/totalUsertwo', params)
    5. const getTotalUserthree = (params) =>
    6. getAction('/admin/consumer/totalUserthree', params)
    7. const getTotalUserfour = (params) =>
    8. getAction('/admin/consumer/totalUserfour', params)
    9. const getTotalUserfive = (params) =>
    10. getAction('/admin/consumer/totalUserfive', params)

    2、页面中导入接口

    1. import {
    2. getTotalUserone,
    3. getTotalUsertwo,
    4. getTotalUserthree,
    5. getTotalUserfour,
    6. getTotalUserfive,
    7. areaTypeLists,
    8. } from '@/api/business'

    3、调用初始化函数

    1. created() {
    2. this.initData()
    3. },

    4、调用接口,获取数据

    1. initData() {
    2. // 定义多个接口请求的Promise
    3. const areaTypeData = areaTypeLists()
    4. const getline2Data = getTotalUserone()
    5. const getbar1Data = getTotalUsertwo()
    6. const getbar2Data = getTotalUserthree()
    7. const getpie1Data = getTotalUserfour()
    8. const getpie2Data = getTotalUserfive()
    9. // 使用Promise.all来等待所有接口请求完成
    10. Promise.all([
    11. areaTypeData,
    12. getline2Data,
    13. getbar1Data,
    14. getbar2Data,
    15. getpie1Data,
    16. getpie2Data,
    17. ])
    18. .then(
    19. ([
    20. areaTypeData,
    21. getline2Data,
    22. getbar1Data,
    23. getbar2Data,
    24. getpie1Data,
    25. getpie2Data,
    26. ]) => {
    27. // 将这些数据分别赋值给相应的变量或对象属性
    28. // 逻辑操作,筛选过滤数据等
    29. }
    30. )
    31. .catch((error) => {
    32. console.error(error)
    33. })
    34. },

  • 相关阅读:
    (附源码)Springboot酒店预订管理系统 毕业设计 092101
    广和通5G AIoT模组引领亮相2022国际物联网展(IOTE),智赋行业数字化新价值
    JavaScript中JSON和Bom对象模型
    基于微信小程序的小说阅读系统(小程序+Nodejs)
    性能测试_JMeter中你可能会忽略的细节点-2
    PHP开发API小技巧,还不快上车?【php下的电商API封装接口】
    FFmpeg入门详解之114:DirectShow读取摄像头数据
    买学生台灯应该怎么选择?学生护眼台灯推荐
    js之防抖、节流函数
    mysql5.7与8.0区别、8.0新特性
  • 原文地址:https://blog.csdn.net/m0_61663332/article/details/133631732
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号