在后端开发中，要遵守的一个规则是不能在循环中访问接口。在前端开发中，推荐也可以遵守这条规则。主要是因为这样的效率高效。
浏览器第一次试探访问option，第二次才正常访问接口，所以要尽可能的减少ajax的访问。主要的策略是首先去重，然后按照顺序执行完一个接口再访问另外一个接口。
去重
在接口中，参数相同的参数，可以先梳理出来，放在一个数组里；如果参数已经存在的，可以直接pass过。
顺序访问接口
遍历存放参数的数组，然后运用async awati组合，待一个接口访问结束之后，再执行一个接口，并将返回的数据，放入一个对象中如：{"tiantianld":[]},这种结构。
最后将参数进行赋值
递归算法
forEach在遍历是，会将值回调给原来的数组。在存在子级时，就会调用递归算法，当不存在时，退出递归算法
<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的一些整理，喜欢的小伙伴记得一键三连
