Tengo estas funciones para cargar archivos en mi fileUploadService :
fileUpload(formData: any) { return this.http.post(`${this.apiUrl}/upload`, formData, { reportProgress: true, observe: 'events' }).pipe( map(event => this.getEventMessage(event)) ); } private getEventMessage(event: HttpEvent<any>) { switch (event.type) { case HttpEventType.UploadProgress: return this.fileUploadProgress(event); case HttpEventType.Response: return event.body; default: return `Upload event: ${event.type}.`; } } private fileUploadProgress(event: any) { const percentDone = Math.round(100 * event.loaded / event.total); return { progress: percentDone, files: [] }; }En uno de mis componentes, llamo a este fragmento de código:
this.fileUploadService.fileUpload(formData).subscribe( result => { this.upload = result; } )Ahora mi pregunta, si el servidor web arroja un error, por lo que la función de publicación http falla y debe detectarse, ¿cómo puedo detectar el error en mi componente y no en el servicio?
Los observables emiten tres tipos de eventos: next , complete y error . El método .subscribe() acepta oyentes de los tres tipos como una lista de argumentos:
subscribe(next?: ((value: T) => void) | null, error?: ((error: any) => void) | null, complete?: (() => void) | null) O como argumento de objeto único de tipo Partial<Observer<T>> :
subscribe(observer?: Partial<Observer<T>>) Observer<T> tiene tres propiedades:
export interface Observer<T> { complete: () => void; error: (err: any) => void; next: (value: T) => void; }Esto significa que tiene dos opciones para pasar sus controladores next y error . O usa:
.fileUpload(formData).subscribe( result => console.log('Success!', result), error => console.log('Error :(', error), )O:
.fileUpload(formData).subscribe({ next: result => console.log('Success!', result), error: error => console.log('Error :(', error), })La segunda variante es preferible en la comunidad.