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的一些整理,喜欢的小伙伴记得一键三连

相关推荐
RainbowSea12 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴17 分钟前
笨方法学python -练习14
java·前端·python
Mintopia24 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia35 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农39 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye42 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务