rxjs 中的嵌套订阅答案

【问题标题】：Nexted subscribes in rxjsrxjs 中的嵌套订阅
【发布时间】：2020-10-14 00:06:34
【问题描述】：

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

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()
                                    })
      })

    })
    
  }

}

我上传图片，从云存储中获取网址
再次请求添加访问者并获取访问者 ID
然后我将现有的输入问卷上传到另一个 api

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

【问题讨论】：

标签： angular performance rxjs google-cloud-storage ionic4

【解决方案1】：

你可以这样：

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())
    }
  );

【讨论】：