Promise.all解决多个async/await串行导致的加载缓慢问题

深藏阁楼爱情的钟 2023-06-18 14:53 4阅读 0赞

## 1.问题起源 ##

源于某个线上小程序商城项目改造，项目需求为商城内的广告图及其点击跳转地址需做成可配置功能。  
设计思路：将广告图地址与跳转地址数据存于数据库中，通过对应管理后台进行配置。于是为了精确赋值，在源码内便出现多个async/await的串行异步请求，导致负载压力过大时出现加载速度缓慢的问题。

## 2.解决方案 ##

使用Promise.all（）方法将多个async/await封装并发进行，具体如下：

let head_b1,head_b2,head_b3,head_b4;
    			Promise.all([
    				this.$api.request({ 
    					data_key: 'head_b1'
    				}, '/DataImgSys/', 'getValue'),
    				this.$api.request({ 
    					data_key: 'head_b2'
    				}, '/DataImgSys/', 'getValue'),
    				this.$api.request({ 
    					data_key: 'head_b3'
    				}, '/DataImgSys/', 'getValue'),
    				this.$api.request({ 
    					data_key: 'head_b4'
    				}, '/DataImgSys/', 'getValue')
    			]).then((result)=>{ 
    				head_b1=result[0].data[0].data_value;
    				head_b2=result[1].data[0].data_value;
    				head_b3=result[2].data[0].data_value;
    				head_b4=result[3].data[0].data_value;
    			});

目前未能找到如直接从封装定义的requese中取对应值的方法，只能先行定义变量后续再做判断或取值。  
ps：promise.all需慎用，否则会造成其中一个请求失败而导致程序阻塞的风险，解决方法：封装的async/await中无论success/fail都是用resolve返回data，由返回值进行判断而非使用会导致阻塞的reject