Angular rxjs中的Nexted订阅

我有一个函数，它从每个请求中获取信息并将其传递给下一个请求。实现这一点的最佳方式是什么。这是可行的，但考虑到我有嵌套订阅，从长远来看，这可能会有一些问题

onSubmit(){


    this.loadingController.create({keyboardClose:true, message:'Submitting Info...'})
    .then(loadingEl => {
      loadingEl.present()

      this.sharedService.uploadImage(this.state['image']).subscribe(imgUrl => {
 
        this.sharedService.addVisitor(this.state['first_name'], 
                                      this.state['last_name'], 
                                      this.state['role'], 
                                      this.location,
                                      imgUrl,
                                      this.state['visitee_email'],
                                      this.state['visitee_phone'],
                                      this.state['visitee_name'],
                                      this.state['company'])
        .subscribe(visitor => {

          console.log(visitor)

          this.sharedService.addQuestionnaire(visitor.id)
          .subscribe(questionnaire => {
    
            console.log(questionnaire)
            
            //dismiss the loading element
            loadingEl.dismiss();  
    
            // navigate away
            this.router.navigate(['/home'])
        
          })
        
        })

      }, error => {
        loadingEl.dismiss()
        console.log(error)
        this.alertController.create({header: "An error ocurred...", 
                                    message: "Could not submit visitor info.", 
                                    buttons: [{text: 'Okay', handler: () => this.router.navigateByUrl('/home')}]}).then(alertEl => {
                                      alertEl.present()
                                    })
      })

    })
    
  }

}

我上传图片，从云存储中获取url

再次请求添加访问者并获取访问者id

之后，我将现有的输入问卷上传到另一个api

---

如果有人可以缩小或帮助我使这段代码更好将不胜感激

您可以像这样使用它：

import { switchMap, catchError, throwError } from 'rxjs/operators';


this.sharedService
  .uploadImage(this.state['image'])
  .pipe(
    switchMap(imgUrl => this.sharedService              
      .addVisitor(
        this.state['first_name'], 
        this.state['last_name'], 
        this.state['role'], 
        this.location,
        imgUrl,
        this.state['visitee_email'],
        this.state['visitee_phone'],
        this.state['visitee_name'],
        this.state['company']
      )
    ),
    switchMap(({ id }) => this.sharedService.addQuestionnaire(id)),
    catchError((error: any) => throwError(error))
  )
  .subscribe(
    questionnaire => {
      console.log(questionnaire)
            
      loadingEl.dismiss();  
    
      this.router.navigate(['/home'])   
    },
    error => {
      loadingEl.dismiss()

      console.log(error)
      
      this.alertController.create({
        header: "An error ocurred...", 
        message: "Could not submit visitor info.", 
        buttons: [{text: 'Okay', 
        handler: () => this.router.navigateByUrl('/home')}]}).then(alertEl => alertEl.present())
    }
  );

---

你可以这样做：

import { switchMap, catchError, throwError } from 'rxjs/operators';


this.sharedService
  .uploadImage(this.state['image'])
  .pipe(
    switchMap(imgUrl => this.sharedService              
      .addVisitor(
        this.state['first_name'], 
        this.state['last_name'], 
        this.state['role'], 
        this.location,
        imgUrl,
        this.state['visitee_email'],
        this.state['visitee_phone'],
        this.state['visitee_name'],
        this.state['company']
      )
    ),
    switchMap(({ id }) => this.sharedService.addQuestionnaire(id)),
    catchError((error: any) => throwError(error))
  )
  .subscribe(
    questionnaire => {
      console.log(questionnaire)
            
      loadingEl.dismiss();  
    
      this.router.navigate(['/home'])   
    },
    error => {
      loadingEl.dismiss()

      console.log(error)
      
      this.alertController.create({
        header: "An error ocurred...", 
        message: "Could not submit visitor info.", 
        buttons: [{text: 'Okay', 
        handler: () => this.router.navigateByUrl('/home')}]}).then(alertEl => alertEl.present())
    }
  );