Question

我有3个功能。我想在一个函数完成后调用另一个函数。在我的第一个函数中，我在页面中设置了一个变量（学生）。第二个函数使用该变量。所以我在用诺言。但是我尝试了很多方法。但是我不能保证执行代码。我希望在我的buttonClick中，我的三个功能应该有序地异步工作。我想像下面。我能怎么做？

  students: [];
  studentInfoList: [];
  otherList: [];

  buttonClick() {
    const myPromise = new Promise(function (resolve, reject) {
      myFirstOperation();
    });

    myPromise()
      .then(result => {
        mySecondOperation();
      })
      .then(result => {
        myThirdOperation();
      });
  }


  myFirstOperation() {
    this.studentService.getStudents().subscribe(
      result => {
          this.students = result.data;
      });
  }

  mySecondOperation() {
    for (let student of this.students) {
      this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
    }
  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(this.studentInfoList);
    }
  }

Answer 1

尝试这种方式。

student = [];
studentInfoList = [];
otherList = [];

this.buttonClick().then(() => {
  this.buttonClickResult().then((data) => {        
    this.secondFunction().then(() => {
        this.thiedFunction();
    });
  });
})    

 buttonClick(){    
    return new promise((resolve , reject) => {
     // Do your stuff hear
    })
  }

buttonClickResult(){    
  return new promise((resolve , reject) => {
    this.studentService.getStudents().subscribe((result) => {
        this.student.push(...result.data);
        resolve("pass data hear"); // Pass data if you need.                                                               
    })
  })
}

secondFunction(){    
  return new promise((resolve , reject) => {
    for (let data of this.student) {
        this.studentInfoList.push({ "studenNameSurname" : data.Name + data.Surname });
    }
  })
}

thiedFunction(){
   this.otherList.push(...this.studentInfoList); 
}

Answer 2

students: [];
studentInfoList: [];
otherList: [];

buttonClick() {
    this.myFirstOperation()
        .then(() => {
            this.mySecondOperation();
            this.myThirdOperation();
        })
}


myFirstOperation() {
    new Promise((resolve, reject) => {
        this.studentService.getStudents().subscribe(
            result => {
                this.students = result.data;
                resolve();
            });
    })

}

mySecondOperation() {
    for (let student of this.students) {
        this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
    }
}

myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
        this.otherList.push(this.studentInfoList);
    }
}

Answer 3

您可以使用async / await

students: [];
  studentInfoList: [];
  otherList: [];

  async buttonClick() {
        await this.myFirstOperation();
        this.mySecondOperation();
        this.myThirdOperation();
  }


 async myFirstOperation() {
    const result = await this.studentService.getStudents().toPromise();
    this.students = result.data;

  }

  mySecondOperation() {
    for (let student of this.students) {
      this.studentInfoList.push({ studenNAmeSurname=student.Name + student.Surname });
    }
  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(studentInfoList);
    }
  }

Answer 4

mySecondOperation和myThirdOperation不会做任何异步操作，因此您可以编写

buttonClick() {
    this.studentService.getStudents().subscribe(
          result => {
              this.students = result.data;
              for (let student of this.students) {
                    this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
              }
              for (let studentInfo of this.studentInfoList) {
                    this.otherList.push(this.studentInfoList);
              }
          });
}

Answer 5

我找到了解决方案。 @KrutiChoksiPatel和@SachinShah的答案与我的答案非常接近。但是它们不会起作用。因为在该答案中，没有像下面这样的“ resolve（）”函数。

 buttonClick() {
    this.myFirstOperation().then(() => {
      this.mySecondOperation(() => {
        this.myThirdOperation();
      });
    });
  }

  myFirstOperation() {
    return new Promise((resolve, reject) => {
      this.studentService.getStudents().subscribe(
        result => {
          this.students = result.data;
          resolve(); //This row is important. Because of not working
        });
    })
  }

  mySecondOperation() {
    return new Promise((resolve, reject) => {
    for (let student of this.students) {
      this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
      }
      resolve();  //This row is important. Because of not working
    })
  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(this.studentInfoList);
    }
  }

Answer 6

也许您需要创建2个Promises。试试这个

  students: [];
  studentInfoList: [];
  otherList: [];

  buttonClick() {

    const myPromise = new Promise(function (resolve, reject) {
     this.studentService.getStudents().subscribe(
      result => {
          this.students = result.data;
          resolve();
      });
    });

    myPromise()
      .then(result => {
        mySecondOperation();
      });
  }

  mySecondOperation() {

     const my2Promise = new Promise(function (resolve, reject) {
        for (let student of this.students) {
          this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
        }
          resolve();
     });

     my2Promise()
      .then(result => {
        myThirdOperation();
      });

  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(this.studentInfoList);
    }

}

打字稿中带有承诺的角度调用函数

6 个答案: