如何在switchmap中发送带有条件的嵌套http请求？答案

【问题标题】：How to send nested http requests with condition inside switchmap?如何在switchmap中发送带有条件的嵌套http请求？
【发布时间】：2020-07-26 21:24:01
【问题描述】：

嗨，我有一个函数，我想发送两个 http 请求，第二个请求只是在第一个请求完成后，我在管道内使用 switchMap，条件基于一个角度形式，我的编辑器显示下一个错误：

Argument of type '(data: Object) => void' is not assignable to parameter of type '(value: Object, index: number) => ObservableInput<any>'.
  Type 'void' is not assignable to type 'ObservableInput<any>'.

这是我的功能：

  store() {
        this.empleadosEmpleadoService.store({
          fecha_contratacion:  this.empleadoForm.value.fecha_contratacion,
          fecha_nacimiento:  this.empleadoForm.value.fecha_nacimiento,
          curp: this.empleadoForm.value.curp,
          rfc: this.empleadoForm.value.rfc,
          telefono: this.empleadoForm.value.telefono,
          user: {
            email:  this.empleadoForm.value.email,
            username:  this.empleadoForm.value.username,
            password:  this.empleadoForm.value.password,
            first_name:  this.empleadoForm.value.first_name,
            last_name:  this.empleadoForm.value.last_name
          }
        }).pipe(
          switchMap(data =>{
    
            if(this.empleadoForm.value.foto){
              this.empleadosEmpleadoService.subirFoto(
                data['user_id'],
                this.empleadoForm.value.foto
                )
            }
         })
          ).subscribe(async empleado => {
    
          if(empleado) {
            this.empleadoForm.reset();
            this.empleadoAgregado.emit(empleado);
            this.dismissModal();
          }
        
        });
      }

【问题讨论】：

标签： javascript angular typescript ionic-framework observable

【解决方案1】：

对于switchMap，您需要返回一个 Observable，因为您正在从源切换。由于源是可观察的流，因此切换后的输入也应该是可观察的流。

假设this.empleadosEmpleadoService.subirFoto也是网络请求，它应该返回一个observable，你需要返回给switchMap。

注意下面的两个return 语句：

import { of as observableOf } from 'rxjs';
 
  store() {
        this.empleadosEmpleadoService.store({
          fecha_contratacion:  this.empleadoForm.value.fecha_contratacion,
          fecha_nacimiento:  this.empleadoForm.value.fecha_nacimiento,
          curp: this.empleadoForm.value.curp,
          rfc: this.empleadoForm.value.rfc,
          telefono: this.empleadoForm.value.telefono,
          user: {
            email:  this.empleadoForm.value.email,
            username:  this.empleadoForm.value.username,
            password:  this.empleadoForm.value.password,
            first_name:  this.empleadoForm.value.first_name,
            last_name:  this.empleadoForm.value.last_name
          }
        }).pipe(
          switchMap(data =>{
    
            if(this.empleadoForm.value.foto){
             // Assuming this.empleadosEmpleadoService.subirFoto returns an Observable
              return this.empleadosEmpleadoService.subirFoto(
                data['user_id'],
                this.empleadoForm.value.foto
                )
            }
            
            // You must return an observable to a switchMap
            return observableOf(data); // Or return whatever you want
         })
          ).subscribe(async empleado => {
    
          if(empleado) {
            this.empleadoForm.reset();
            this.empleadoAgregado.emit(empleado);
            this.dismissModal();
          }
        
        });
      }

Type 'void' is not assignable to type 'ObservableInput<any>'.

// is complaining that you needed to return an Observable, but you are returning 'void' (not returning anything)

【讨论】：

是的，现在有两个网络请求正在使用您的解决方案。

【解决方案2】：

我通过在 if 中添加 return 并在 else 情况下返回空的 observable 来稍微修复了你的 switchMap

 switchMap(data =>{
    
            if(this.empleadoForm.value.foto){
              return this.empleadosEmpleadoService.subirFoto(
                data['user_id'],
                this.empleadoForm.value.foto
                )
            };
           return EMPTY
         })

【讨论】：

我试过了，但它不适用于这种情况。