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

目录

背景：

简介： 

举个栗子🌰：

这是我们的原始代码：

这是改造后的代码：

总结一下：

---

背景：

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

---

简介： 

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

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

 一般来说过程是这样的：

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

---

举个栗子🌰：

接上一篇文章，我们可以在循环请求的基础上进一步优化代码。
回顾点击：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);

---

总结一下：

使用递归函数优化循环请求过程可以提高代码的可读性和可维护性，同时实现在每次循环之后再进行下一次循环请求的需求。它是一种简洁、高效的编程技巧，在处理多次循环请求时非常有用。

通过使用递归函数优化循环请求过程，我们可以获得如下好处：

1. 简洁的代码结构：使用递归函数可以避免冗长的循环代码，并将每次请求的处理逻辑集中在一个函数中，使代码更加清晰易读。
2. 可控的请求顺序：递归函数可以确保每次请求都按顺序进行，并在获取到结果后再进行下一次请求，避免了并发请求带来的问题。
3. 灵活的条件判断：通过在递归函数中添加条件判断语句，我们可以灵活地控制是否需要进行下一次循环请求，根据需求进行定制化的处理。