js如何在递归调用接口结束之后调用别的接口

Question

应该如何修改可以在递归调用结束之后只调用editAreaDistrict接口一次，感谢各位

  expandAllChildren(pathCode, layer) {
      queryDistrictListByParent(pathCode, layer).then((response) => {
        if (response.status === 200) {
          response.data.forEach((item, index) => {
            this.tableData.push(item)
            // 如果当前子级还有子级执行递归
            if (item.hasChildren === true) {
               this.expandAllChildren(item.pathCode, item.layer)
            }
          })
          this.tableData = this.filterSameAttri(this.tableData);
          let params = {
            areaId: this.selectItems.id,
            areaNumber: this.productCategory.Code,
            areaName: this.productCategory.Name,
            districtLists: this.tableData,
          }
        //想在递归结束之后调用的接口
          editAreaDistrict(params).then((response) => {
            if (response.status == 200) {
              this.$message.success('关联成功')
              this.cancelDisabled = true // 取消不可用
              this.saveDisabled = true // 保存不可用
              this.delDisabled = false
              this.helpDialogVisible = false
              this.searchInterface()
            }
          })
        
        this.dialogVisible = false
        }
      })
    },

Answer 1

建议&疑问

1. 使用 await 代替 Promise.then 写法，逻辑更容易理清楚。（参阅：理解 JavaScript 的 async/await）
2. response.data.forEach 这里是异步遍历（里面递归调用的 expandAllChildren 是异步处理）。这里要等所有异步完成，应该拿到所有对应的 Promise 对象并使用 Promise.all 或者 Promise.allSettled 来等待所有项完成
3. 完成之后就可以调用你需要调用的那个接口。但有个问题，param 参数中的 tableData 是贯穿了所有递归过程的，所以 editAreaDistrict 真的是想写在这个位置吗？
4. 由于 JS 有局部函数/箭头函数，建议把递归函数写在入口内（这里把外层 expandAllChildren 看作入口）
5. 最后提醒一下，一般在递归过程中，不会对同一个数据既填充又使用 —— 这样干很容易把人整晕。可以考虑使用局部数据来处理，或在完整的递归完成之后再使用。

所以，先自己清理一下逻辑。然后再来研究下怎么写。