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

资深前端之路2024-04-12 11:08

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

浏览器第一次试探访问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的一些整理，喜欢的小伙伴记得一键三连