问题描述

先看原问题代码

async function fn(param){
	return new Promise(asycn (resolve, reject) => {
		// 模拟异步函数
		const res = await requestFn();// 模拟请求
		if(res.err){
			reject(err);
			return;
		}
		if(res?.data){
			// 符合xx条件 再次递归函数
			fn(res.data);
		}
		/**
			常规逻辑执行
			todo
		*/
		resolve(res);
		console.log('res1');
	})
}

(async function(){
	// 模拟执行
	await fn(1);
	console.log('fn已经执行完毕');
}())

预期与执行实际

预期结果是：等待fn函数执行完毕再执行后续的log；

	"res1"
	...
	"res1"
	"fn已经执行完毕"

实际执行：

	"fn已经执行完毕"
	"res1"
	...
	"res1"

解决代码

async function fn(param){
	return new Promise(asycn (resolve, reject) => {
		const compressPromises = [];// 存储promise执行队列
		// 模拟异步函数
		const res = requestFn();// 模拟请求
		if(res.err){
			reject(err);
			return;
		}
		if(res?.data){
			// 符合xx条件 再次递归函数
			const promiseProgress = fn(res.data);// 保存promise执行进程
			compressPromises.push(promiseProgress);
		}
		/**
			常规逻辑执行
			todo
		*/
		resolve(res);
		console.log('res1');
		
		// 用promise.all 存储所有promise回调，放在最后执行
		try {
	        const results = await Promise.all(compressPromises);
	        resolve(results);
	    } catch (error) {
	        reject(error);
	    }
	})
}

(async function(){
	// 模拟执行
	await fn(1);
	console.log('fn已经执行完毕');
}());

主要思路

利用promise.all收集每一次递归调用的异步函数的返回值，确保最外层await不会在第一个函数执行完就收到返回值，内部使用ayscn / await确保内部函数执行的时候，是顺序执行。