Vue-js异步请求问题（“修改”案例）

主要代码段：

依次调用，可以使得异步请求变为“同步”（逐级往下调用）

注：modifyRoom中不可直接调用函数deleteUser和addUser，否则无法控制异步（因为各自有自己的异步）

这样可以避免后端报错（实测若直接调用函数deleteUser和addUser，flask后端会报各种错，如连不上数据库（pymysql），以及报500的接口错误等）

    //获取用户信息
    async getUserInfo() {
      apiGetUser().then(success => {
        this.tableData = success.data.data;
      }, error => {
        console.log(error);
      })
    },
    //增加用户
    async addUser() {
      if (this.$store.state.manage == false) {
        this.$message({
          type: "error",
          message: "非管理员用户，无法进行此操作！"
        })
        return;
      }
      let userData = {
        user_id: this.currentRowAddressInput,
        user_password: this.currentRowContainInput,
        user_type: this.userType
      }
      apiAddUser(userData).then((success) => {
        this.$message({
          type: "success",
          message: "增加用户成功"
        })
      }, (error) => {
        this.$message({
          type: "error",
          message: "用户ID重复"
        })
      }).then((success) => {
        this.getUserInfo();
      }, (error) => {
        console.log(error);
      })
    },
    //删除用户
    async deleteUser() {
      if (this.$store.state.manage == false) {
        this.$message({
          type: "error",
          message: "非管理员用户，无法进行此操作！"
        })
        return;
      }
      let userData = {
        user_id: this.currentRowAddressInput
      }
      apiDeleteUser(userData).then((value) => {
        this.$message({
          type: "success",
          message: "删除用户成功"
        })
      }, (error) => {
        console.log(error);
      }).then((value) => {
        this.getUserInfo();
      })
    },
    //修改用户
    async modifyRoom() {
      if (this.$store.state.manage == false) {
        this.$message({
          type: "error",
          message: "非管理员用户，无法进行此操作！"
        })
        return;
      }
      let userDataDelete = {
        user_id: this.currentRowAddressInput
      }
      let userDataAdd = {
        user_id: this.currentRowAddressInput,
        user_password: this.currentRowContainInput,
        user_type: this.userType
      }



      // apiDeleteUser(userDataDelete).then(() => {
      //   apiAddUser(userDataAdd).then(() => {
      //     this.getUserInfo().then(() => {
      //       this.$message({
      //         type: "success",
      //         message: "修改成功"
      //       })
      //     })
      //   })
      // })



      // 解决异步问题！！
      let ans1 = apiDeleteUser(userDataDelete);
      let ans2 = ans1.then((value) => {
        apiAddUser(userDataAdd)
      }, (error) => {
        console.log(error);
      })
      let ans3 = ans2.then((value) => {
        this.getUserInfo()
      }, (error) => {
        console.log(error);
      })
      let ans4 = ans3.then((value) => {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      })
    }