Promise解决异步编程问题

一个典型的异步编程问题：即您尝试在循环中发起多个异步请求，并希望在所有请求都完成后执行某些操作。然而，由于JavaScript的异步性质，num和total的比较在循环结束时立即执行，而不是在所有请求都完成后执行。这可能导致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);  
           });  
       }  
     });  
   }

原文地址：https://blog.csdn.net/motoudi/article/details/140145729

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！