Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Uso de retry() para reintentar una petición

16/25
Recursos

Aportes 13

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

...

import * as FileSaver from 'file-saver';

...

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.scss']
})
export class ProductDetailComponent implements OnInit {

  ...

  getFile() {
    this.productsService.getFile()
      .subscribe(content => {
        var blob = new Blob([content], {type: 'text/plain;charset=utf-8'});
        FileSaver.saveAs(blob, 'archivo.txt');
      });
  }

}

Si les interesa bajar un archivo .zip con file-saver es necesario cambiar el responseType a arraybuffer en la petición http:

 getFile(): Observable<ArrayBuffer> {
    return this.http.get('tu ruta', { responseType: 'arraybuffer' });
  }```

Lo implemente de la siguiente manera:

getBlopFile(): Observable<string> {
    return this.http
      .get('assets/files/test.txt', { responseType: 'blob' })
      .pipe(
        map((res) => {
          const urlCreator = window.URL;
          const urlString = urlCreator.createObjectURL(res);
          return urlString;
        })
      );
  }

Y en el controlador (aunque esto podría generalizarse en una utilería)

getFile(): void {
    this.productsService.getBlopFile().subscribe((urlBlop) => {
      const a = document.createElement('a');
      a.href = urlBlop;
      a.download = 'file.test';
      a.click();
      URL.revokeObjectURL(urlBlop);
    });

Si vas a mapear datos nunca lo hagas en el componente, hazlo siempre desde el servicio

Reto

Peticion del servicio

// products.service.ts
downloadFile() {
    return this.http
      .get('assets/files/historial-20200902.pdf', {
        responseType: 'blob', // This must be a Blob type
      });
  }

Luego hacemos la peticion en el componente:

import * as FileSaver from 'file-saver';

downloadFile() {
    this.productService.downloadFile().subscribe(file => FileSaver.saveAs(file, 'file.pdf'));
  }

No existe una manera genérica de implementar el retry? para cuando capturamos todas las excepciones en sentry, sin catch, cómo lo dice el reto del video anterior?

RxJs es muy útil para el manejo de datos, en mi caso me ha servido bastante para la transformación de datos, tuve un caso en donde con vanilla eran como 31 líneas con RxJs lo resolví en 7.

PDF

getFilePDFService(){
      return this.http.get('assets/files/ArchivoPDF.pdf', {responseType: "blob" })
    }
// Abrir PDF
    getFilePDF(){
      this.productService.getFilePDFService().subscribe(
        contenido => {
          console.log(contenido);
    var file = new File( [contenido] , "PDF.pdf", {type: "application/pdf;charset=utf-8"});
    FileSaver.saveAs(file);
        }
      )
    }
getFile(){
    this.productsService.getFile()
    .subscribe(content=>{
      console.log(content)
      var FileSaver = require('file-saver');
      var blob = new Blob([content],{type: "text/plain;charset=utf-8"});
      FileSaver.saveAs(blob, "FundamentosRobotica.pdf");
    })
  }```
getFile() {
    // tslint:disable-next-line: prefer-const
    let FileSaver = require('file-saver');
    this.productsService.getFile()
    .subscribe(content => {
      console.log(content);
      // tslint:disable-next-line: prefer-const
      let blob = new Blob([content], {type: 'text/plain;charset=utf-8'});
      FileSaver.saveAs(blob, 'hello world.txt');
    });
  }```
  getFile(): void {
    this.productsService.getFile().subscribe(resp => {

      const FileSaver = require('file-saver');
      const blob = new Blob([resp], {type: 'text/plain;charset=utf-8'});
      FileSaver.saveAs(blob, 'archivo.txt');

    });
  }```

Retry es un operador de rxjs, te ayuda a realizar mas intentos si falla la peticion, tambien vimos que la respuesta de una peticion no es un json, con {responseType: ‘text’}