前端使用递归函数优化循环请求过程

背景：

简介：

举个栗子🌰：

这是我们的原始代码：

这是改造后的代码：

总结一下：

背景：

在软件开发中，经常会遇到需要进行多次循环请求的情况。然而，传统的循环请求方式会导致代码冗长、可读性差，并且无法在每次循环之后再进行下一次循环请求。为了解决这个问题，我们可以使用递归函数来优化循环请求过程，实现更简洁、高效的代码结构。

简介：

递归函数是一种自我调用的函数，它可以在每次调用时处理不同的参数，并根据特定的条件来决定是否继续调用自身。通过递归函数，我们可以实现在每次循环之后再进行下一次循环请求的需求。

递归函数是一种自我调用的函数，它可以在每次调用时处理不同的参数，并根据特定的条件来决定是否继续调用自身。通过递归函数，我们可以实现在每次循环之后再进行下一次循环请求的需求。

一般来说过程是这样的：

首先，我们需要定义一个递归函数，例如loopRequests。该函数接收一个参数，用于表示当前循环的索引。在函数内部，我们可以根据索引来获取相应的请求参数，并进行请求处理。
在每次循环请求中，我们使用await关键字来等待请求的结果。这样可以确保每次请求都是按顺序进行，并且在获取到结果之后再进行下一次循环。
在处理完请求结果后，我们可以根据特定的条件来判断是否需要进行下一次循环请求。如果满足条件，则通过递归调用loopRequests函数，并传入递增的索引作为参数，来进行下一次循环请求。
当索引超过循环范围时，就表示所有的请求都已完成。此时，我们可以进行后续的操作，如数据处理、构建数据结构等。

举个栗子🌰：

接上一篇文章，我们可以在循环请求的基础上进一步优化代码。
回顾点击：Promise.all使用

这是我们的原始代码：

这是我们没有控制请求顺序的情况下使用Promise.all等待所有请求完成后进行后续的数据处理操作，这就可能导致最终的结果集是包含一二三四厂的分组，但是展示顺序可能是二一三四或者一四三二等等

initRoleTreeOfManagements() {const manageUnitUUIDs = ['1', '2', '3', '4'];const manageUnitNames = ['一厂', '二厂', '三厂', '四厂'];const endTreeData = [];const promises = manageUnitUUIDs.map((manageUnitUUID, index) => {return pbService('service.Service', 'queryListByAttr', {query_fields: {sysisdelete: '0',manage_unit_uuid: manageUnitUUID,},result_fields: 'uuid,name,uuid',order_fields: '',}).then(res => {if (res && res.resultset) {res.resultset.push({role_name: manageUnitNames[index],app_uuid: this.$TREE_ROOT,});endTreeData.push(...res.resultset);}})});console.log(endTreeData)Promise.all(promises).then(() => {this.roleTreeData = loopTreeData(endTreeData, this.$TREE_ROOT, {idFiled: 'uuid',nameField: 'name',parentField: 'uuid',});},

如果想要控制结果集展示顺序，就可以通过控制请求顺序的方式（当然也可以对最终结果集进行排序哈，本文主要围绕使用递归函数来进行解读）控制结果集的顺序。

这是改造后的代码：

initRoleTreeOfManagements() {const manageUnitUUIDs = ['1', '2', '3', '4'];const manageUnitNames = ['一厂', '二厂', '三厂', '四厂'];const endTreeData = [];const loopRequests = (index) => {if (index >= manageUnitUUIDs.length) {console.log(endTreeData);this.roleTreeData = loopTreeData(endTreeData, this.$TREE_ROOT, {idFiled: 'uuid',nameField: 'name',parentField: 'uuid',});return;}pbService('service.Service', 'queryListByAttr', {query_fields: {sysisdelete: '0',manage_unit_uuid: manageUnitUUIDs[index],},result_fields: 'uuid,name,uuid',order_fields: '',}).then(res => {if (res && res.resultset) {res.resultset.push({role_name: manageUnitNames[index],app_uuid: this.$TREE_ROOT,});endTreeData.push(...res.resultset);}loopRequests(index + 1); // 递归调用，进行下一次循环});};loopRequests(0); // 初始调用，索引为0
}

在这个修改后的代码中，我们定义了一个名为loopRequests的递归函数，它接收一个参数index，用于表示当前循环的索引。

在每次循环中，我们首先判断是否满足循环的终止条件，即index是否大于manageUnitUUIDs数组的长度。如果满足条件，即所有请求都已完成，我们打印出endTreeData数组，并将其作为参数调用loopTreeData函数来构建树状数据结构。

如果不满足终止条件，我们发起异步请求，并在请求完成后处理结果。在处理结果后，我们通过递归调用loopRequests函数并将索引递增，来进行下一次循环。

通过这样，可以实现在每次循环之后再进行下一次循环请求的需求。每次请求的结果会被添加到endTreeData数组中，并在所有请求完成后进行后续操作。

总之，就是使用递归函数帮我们优化循环请求过程。

看懂了吗？不懂？没关系再看个简单的（不额外解释了，看注释吧）：

// 首先。定义一个名为loopRequests的递归函数。
function loopRequests(index) {
// 在函数内部，我们定义了一个requestData数组，用于模拟请求的数据。const requestData = [{ id: 1, name: 'John' },{ id: 2, name: 'Jane' },{ id: 3, name: 'Mike' },{ id: 4, name: 'Sarah' },];// 定义循环的终止条件 ，在每次循环中，我们首先判断是否满足循环的终止条件，即index是否大于等于requestData数组的长度。如果满足条件，即所有请求都已完成，我们打印出"所有请求已完成"并返回。if (index >= requestData.length) {console.log("所有请求已完成");return;}// 如果不满足终止条件，模拟异步请求，使用setTimeout函数来延迟1秒执行，并在请求完成后处理结果setTimeout(() => {const request = requestData[index];console.log(`请求 ${request.id} 完成，响应数据为:`, request);// 在延迟结束后，我们获取当前请求的数据，处理请求结果，例如构建数据结构// 在这里进行相应的处理操作loopRequests(index + 1); // 递归调用，进行下一次循环}, 1000);
}// 调用递归函数，初始索引为0
loopRequests(0);