Promise解决异步编程问题

一个典型的异步编程问题:即您尝试在循环中发起多个异步请求,并希望在所有请求都完成后执行某些操作。然而,由于JavaScript的异步性质,numtotal的比较在循环结束时立即执行,而不是在所有请求都完成后执行。这可能导致this.navList在数据完全填充之前就被赋值。

为了优化这段代码,您可以使用Promise.all来等待所有异步请求完成。这里是如何实现的:

  1. 将循环中的异步请求封装成Promise数组:为每个navigatorID创建一个Promise,该Promise在内部调用getAllMemberRecommendList

  2. 使用Promise.all等待所有Promise完成:一旦所有Promise都创建好了,使用Promise.all来等待它们全部解决。

  3. 处理结果:在所有请求都完成后,处理结果并更新this.navList

    getNavList() {  
      getNavigatorList({  
        siteID: Common.siteID,  
        navigatorID: Common.peoNavID,  
        sortTypeOrder: 1,  
        isValid: 1,  
        isLock: 0,  
      }, (res) => {  
        if (res.data.header.code === 0) {  
          const navList = res.data.body.data.rows;  
          const promises = navList.map(item => {  
            return new Promise((resolve, reject) => {  
              getAllMemberRecommendList({  
                navigatorID: item.navigatorID,  
                sortTypeTime: 2,  
                isValid: 1,  
                isLock: 0,  
                pageNumber: 99,  
              }, (res1) => {  
                if (res1.data.header.code === 0) {  
                  item.memberPublishList = res1.data.body.data.rows;  
                  resolve(item); // 解析当前item  
                } else {  
                  reject(new Error('Failed to fetch member recommend list for ' + item.navigatorID));  
                }  
              });  
            });  
          });  
      
          Promise.all(promises)  
            .then(updatedNavList => {  
              this.navList = updatedNavList;  
              console.log("导航", this.navList);  
            })  
            .catch(error => {  
              console.error('Error fetching data:', error);  
            });  
        }  
      });  
    }

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值