React-js中等待多个回调全部完成后执行后续函数

1.背景介绍

今天页面需要读取多个文件，用的FileReader同时读取多个文件。
用到这个FileReader大家都知道他是需要等待onload的回调的。

	const reader = new FileReader();
	reader.readAsArrayBuffer(dataFileList[key].file);
    reader.onload = (e)=>{
    	//读取文件操作
    };

那我这js苦手就开始研究怎么等到所有的文件读取完才开始执行下面的代码。

2.解决办法

问了一下大佬，指路让我使用Promise.all()，但是我搜索过程中用到了一个更加巧妙的办法，我在这里记录一下，主要是用了递归的办法：

const read_sheet = (key) =>{
      if(key>=0){
        const reader = new FileReader();
        reader.readAsArrayBuffer(fileNameList[key].file);
        reader.onload = (e)=>{
          // 文件操作
        };
      }else{
        console.log('全部读取完毕')
      }
    }
    
//使用调用函数
read_sheet(fileNameList.length-1)

是不是非常精妙，而且还能顺序读取文件，同时还是纯js解决，问题就是不能异步读取，遇到大文件可能读取比较慢。所以我顺便测试一下用Promise的代码。

3.Promise办法

// 文件读取函数
function readFileAndAddToMap(file){
    return new Promise(function(resolve, reject){
        var reader = new FileReader();
        reader.onload = function(progressEvent){
            var lines = progressEvent.target.result.split('\n');
            firstLine = lines[0];
            console.log('FirstLine'+firstLine);   
            //add to Map here 
            resolve();
        }

        reader.onerror = function(error){
            reject(error);
        }

        reader.readAsText(file);
    });
}

// 创建一个队列来保存Promise
var promises = [];
for (var i = 0; i < files.length; i++){
    //添加进队列
    promises.push(readFileAndAddToMap(files[i]));
}

//用reduce来制作一个promise执行链来顺序执行我们的Promise
promises.reduce(function(cur, next) {
    return cur.then(next);
}, Promise.resolve()).then(function() {
    //所有文件完成后执行代码
}).catch(function(error){
    //处理文件读取错误
});

参考链接：https://www.soinside.com/question/sMb5FRHC7YMZBXua7RkGSG

结语

自从大学的算法课之后就没自己写过递归函数了，对他的印象还留在算法课的八皇后问题上。是我的智商配不上他了，希望以后可以好好学习。我是弱智的llsxily，你可以叫我橘子。