angular - 另一个组件 Ionic 4 中的组件

Question

我正在将我的应用程序迁移到Ionic 4from Ionic 3，我看到async and await calls每个组件都在使用它。我理解为什么要使用它，但是在我的 Ionic 3 应用程序中，我有一个嵌套Loading Controller Component在Alert Controller Component.

离子 3 .ts

submitAssetLoc(form: NgForm){

    const alert =  this.alertCtrl.create({
       header: 'Submit',
       message: 'Are you sure you want to Submit?',
       buttons: [
         {
           text: 'Yes',
           role: 'Yes',
           handler: () => {
             const loading = this.loadingCtrl.create({
                           message: 'Submitting...'
                          });

          loading.present();

            this.stemAPI.updateGPSLoc(this.testData).subscribe((result) => {

              loading.dismiss();
              
            }, (err) => {
                loading.dismiss();
                let alert = this.alertCtrl.create({

                header: 'Error: Could not submit!',
                message: 'Try submitting again, or submit offline!',
                buttons: [
                  {
                    text: 'Try Submitting Again',
                    role: 'Yes',
                    handler: () => {
                    
                    this.newGPSLoc = [];
                  }
                },
                  {
                    text: 'Submit Offline',
                    handler: () => {
                    
                    this.navCtrl.push(SuccessPage, { 'APIresponse': 'Form submitted offline, please go to support page and re-submit!'});
                    }
                  }
                ]
              });
              alert.present();
            }
         )}
         },
         {
           text: 'No',
           role: 'Cancel',
           handler: () => {

           }
         }
       ]
     });
    alert.present();
  }

我的问题是 async,await 调用没有正确实现，我知道我的代码显然效率不高。我假设我需要为每一个都制定方法，但是正确实现此功能的最佳方法是什么？

标签： angularionic-frameworkionic4

Answer 1

希望这会有所帮助

async submitAssetLoc(form: NgForm){

    const alert = await this.alertCtrl.create({
       header: 'Submit',
       message: 'Are you sure you want to Submit?',
       buttons: [
         {
           text: 'Yes',
           role: 'Yes',
           handler: async () => {
             const loading = await this.loadingCtrl.create({
                           message: 'Submitting...'
                          });

          loading.present();

            this.stemAPI.updateGPSLoc(this.testData).subscribe((result) => {

              loading.dismiss();

            }, async (err) => {
                loading.dismiss();
                let alert = await this.alertCtrl.create({

                header: 'Error: Could not submit!',
                message: 'Try submitting again, or submit offline!',
                buttons: [
                  {
                    text: 'Try Submitting Again',
                    role: 'Yes',
                    handler: () => {

                    this.newGPSLoc = [];
                  }
                },
                  {
                    text: 'Submit Offline',
                    handler: () => {

                    this.navCtrl.push(SuccessPage, { 'APIresponse': 'Form submitted offline, please go to support page and re-submit!'});
                    }
                  }
                ]
              });
              alert.present();
            }
         )}
         },
         {
           text: 'No',
           role: 'Cancel',
           handler: () => {

           }
         }
       ]
     });
    alert.present();
  }