vue3 问递归算法中解决ajax访问题

在后端开发中,要遵守的一个规则是不能在循环中访问接口。在前端开发中,推荐也可以遵守这条规则。主要是因为这样的效率高效。

浏览器第一次试探访问option,第二次才正常访问接口,所以要尽可能的减少ajax的访问。主要的策略是首先去重,然后按照顺序执行完一个接口再访问另外一个接口。

去重

在接口中,参数相同的参数,可以先梳理出来,放在一个数组里;如果参数已经存在的,可以直接pass过。

顺序访问接口

遍历存放参数的数组,然后运用async awati组合,待一个接口访问结束之后,再执行一个接口,并将返回的数据,放入一个对象中如:{"tiantianld":[]},这种结构。

最后将参数进行赋值

递归算法

forEach在遍历是,会将值回调给原来的数组。在存在子级时,就会调用递归算法,当不存在时,退出递归算法

javascript 复制代码
<script setup>
import { onMounted, reactive, ref } from 'vue';

const treeData = ref([
  {
    title: '张三1', key: '1', children: [
      {
        title: '张三12', key: '12', children: [
          { title: '张三13', key: '13', children: [] },
          { title: '张三14', key: '14', children: [] },
          { title: '张三15', key: '15', children: [] },
          { title: '张三16', key: '16', children: [] },
        ]
      },
      { title: '张三2', key: '21', children: [] },
      { title: '张三22', key: '22', children: [] },
      { title: '张三23', key: '23', children: [] },
      { title: '张三24', key: '24', children: [] },
      { title: '张三25', key: '25', children: [] },
    ]
  },
  { title: '张三3', key: '31', children: [] },
  { title: '张三4', key: '41', children: [] },
  { title: '张三5', key: '51', children: [] },
])
onMounted(() => {
  setNodeTree(treeData.value)
})

const setNodeTree = (node, num = 0, type = 0) => {
  node.forEach((item) => {

    //当存在子级时,执行递归算法
    if (item.children.length > 0) {
      setNodeTree(item.children, num, type)
    } else {

    }
  })
}

</script>

<template>
  <main>


  </main>
</template>
<style scoped lang="less"></style>

以上是自己在使用前端开发过程中对遍历中使用ajax的一些整理,喜欢的小伙伴记得一键三连

相关推荐
机器视觉知识推荐、就业指导10 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4916 分钟前
golang接口-interface
java·前端·golang
ゞ 正在缓冲99%…16 分钟前
leetcode75.颜色分类
java·数据结构·算法·排序
慕斯策划一场流浪22 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI43 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
奋进的小暄1 小时前
贪心算法(15)(java)用最小的箭引爆气球
算法·贪心算法
hepherd1 小时前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI1 小时前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
Scc_hy1 小时前
强化学习_Paper_1988_Learning to predict by the methods of temporal differences
人工智能·深度学习·算法