递归获取异步数据 - 拼接成树形结构

开发中通常会遇到要获取类似文件目录结构偶的数据
而接口返回的数据往往只有单层目录的数据
如果需要将这些数据一次性输出出来，则需要通过层层遍历找到最底层数据(如空文件夹)

获取异步数据，递归遍历拼接子节点

export default {
  data() {
  	moveFileData: []
  },
  methods: {
  	// 获得初始的树形数据
    moveFilePromise() {
      const _ = this;
      new Promise(resolve => {
        resolve(_.getMoveFileData());
      }).then(res => {
        _.moveFileData = res;
      });
    },
    // 获得初始的树形数据
    async getMoveFileData() {
      const _ = this;
      let currMoveFile = [{ id: 0,fileName: "根目录",children: [] }];
      let params = { ParentId: item.id };
      await _.$api.files_api.getFilelist(params).then(async res => {
        if (res.code==0) {
        	currMoveFile[0]['children'] = await _.axiosFileData(res.data.list);
        }
      }).catch(() => { });
      return currMoveFile;
    },
    // 递归遍历-拼接子节点
    async axiosFileData(reslist) {
      const _ = this;
      if (reslist == null) return null;
      let listFileData = reslist;
      const promises = reslist.map((item, index) => {
        let params = { ParentId: item.id };
        return _.$api.files_api.getFilelist(params).then(async res => {
          if (res.code == 0) {
            listFileData[index]['children'] = await _.axiosFileData(res.data.list);
          }
        }).catch(() => { });
      });
      await Promise.all(promises);
      return listFileData;
    },
  }
}

上述递归获取异步数据，拼接子节点方案，并不适合处理层级海量的数据结构，上述方案更重要的是实现递归获取异步数据拼接成子节点，并同步输出最终结果的思路

---

使用 el-tree 动态更新子节点

<el-tree
  :data="moveFileData"
  :props="moveFileProps"
  :load="loadNodeTree"
  lazy>
</el-tree>
  
export default {
  data() {
  	moveFileData: [{ id: 0,fileName: "根目录",children: [] }]
  },
  methods: {
  	loadNodeTree (node, resolve) {
      const _ = this;
      if(node.data.length>0 && !node.data.id) {
      	return resolve([{ id: 0,fileName: "根目录",children: [] }])
      }
      setTimeout(() => {
        let params = { ParentId: node.data.id };
        _.$api.files_api.getFilelist(params).then(async res => {
          if (res.code==0 && res.data.list) {
            resolve(res.data.list)
          } else resolve([])
        }).catch(() => { });
      }, 300);
    }
  }
}