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

  • 相关阅读:
    恶臭数字论证器 -- 简化版
    Talk | 微软亚洲研究院宋恺涛&南大余博涛:面向文本/音乐序列任务的Transformer注意力机制设计
    Markdown语法入门
    【必知必会】手把手教你配置MySQL环境变量——图文详解
    VMWare安装Centos系统(无桌面模式)
    设计模式——访问者模式
    单个vue echarts页面
    写在博士旅程之前|博士第一年|博士第三年|博士第四年
    几何向量:向量到平面投影和LookAt
    【校招VIP】前端HTML考察之cavas、svg
  • 原文地址:https://blog.csdn.net/m0_61663332/article/details/133631732