¿Cómo puedo evitar múltiples suscripciones anidadas usando operadores RxJS?

Posteriormente a consultar con expertos en esta materia, programadores de diversas ramas y maestros dimos con la solución al problema y la dejamos plasmada en este post.

Solución:

Puedes usar mergeMap y filter operadores de RxJs y encadena tus llamadas. Deberá crear algunas variables de nivel de función para usar durante el encadenamiento.

import  mergeMap, filter, catchError  from 'rxjs/operators`

public upload(file) 
    const gen = this.indexGenerator(); // generator function
    let range, token;
    this.prepareUpload(file)
      .pipe(
        mergeMap((values) => 
          const [response, filekey, data] = values;
          token = response.token;
          return this.encryptData(data, filekey);
        ),
        mergeMap(encryptedDataContainer => 
          const formData = this.prepareEncDataUpload(encryptedDataContainer.data, file.name)
          range = this.getRange(file.size, gen.next().value);

          return this.uploadEncryptedData(formData, token, range);
        ),
        filter(() => !!range.isFinalPart),
        mergeMap(() => 
          return this.completeUpload(encryptedDataContainer.updatedFilekey, token);
        )
        catchError((error) => 
          console.log(error);
          // handle the error accordingly.
        )
      )
      .subscribe(() => 
        console.log('success');
      );

  

Si te ha sido de utilidad nuestro post, agradeceríamos que lo compartas con más entusiastas de la programación de este modo contrubuyes a dar difusión a nuestro contenido.

---

---

Utiliza Nuestro Buscador