Estoy llamando a MS Graph para obtener la foto de un usuario:
// lets get the photo itself let photo$ = this.graph.get$(`users/${id}/photo/$value`, ResponseContentType.Blob) .map(resp => { return new Blob([resp.blob()], { type: resp.headers.get['Content-Type']}); }) .map(photo => { let urlCreator = window.URL; return this.sanitizer .bypassSecurityTrustUrl(urlCreator.createObjectURL(photo)); }) .catch(function (e) { if(e.status === 404) { // no photo for this user! console.log(`No photo for user ${id}! Returning default...`); return undefined; } }) .toPromise(); Sin embargo, muchos usuarios no tienen una foto. En ese caso, lo que me gustaría hacer es crear una URL de objeto para alguna foto predeterminada (quizás una de estas ) y emitirla desde el Observable. O incluso simplemente emita un undefined desde el Observable, que puedo manejar en el front-end mostrando alguna imagen predeterminada.
Sé que mi captura se está disparando, porque veo esto en la consola del navegador:
¡No hay foto para el usuario xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx! Devolviendo el valor predeterminado... (salida redactada)
De hecho, estoy extrayendo muchos bits de datos diferentes para cada usuario, cada uno en su propio Observable. Luego convierto cada uno de esos Observables en Promesas, y luego hago un Promise.all() en todos ellos.
// let's pull all of this together to form a ConcreteUser return Promise.all([photo$, ...]) .then(values => { const photo = values[0]; ... El problema es que en el caso de un 404 para la foto de un usuario, Promise.all cancela por completo y no puedo recuperar al usuario.
Intenté detectar errores en la photo$ observable y emitir un valor undefined (que planeé manejar más adelante), pero no parece estar haciendo lo que quiero.
¿Cómo manejo los 404 en mi Observable aquí y emito algo más (quizás undefined ) en lugar de matar el Observable?
Creo que puedo haber descubierto esto. Una pista estaba al acecho en la consola del navegador...
TypeError: proporcionó 'indefinido' donde se esperaba una transmisión. Puede proporcionar un Observable, Promise, Array o Iterable.
Leer la documentación de RxJs sobre el manejo de errores les mostró hacer lo que estoy tratando de hacer, así que esto me confundió un poco. Pero luego me di cuenta de que en la documentación llaman a una función misteriosa getCachedVersion() que supuse que devolvía algo real almacenado en caché. Sin embargo, si en cambio devolvieran un Observable.of() algo real en caché, entonces eso podría explicarlo.
Cuando cambié mi código catch a:
.catch(function (e) { if(e.status === 404) { // no photo for this user! console.log(`No photo for user ${id}! Returning default...`); return Observable.of(undefined); } })...todo empezó a funcionar.
Para traducir la respuesta de Johns a una implementación actualizada de rxjs, ahora se ve así:
import { Observable, throwError, of } from 'rxjs'; import { catchError } from 'rxjs/operators'; const observale: Observable<unknown>; observale.pipe( catchError(err => { if(err.error.statusCode === 404) { return of(undefined); } else { //important to use the rxjs error here not the standard one return throwError(err); } }) ) .subscribe(val => { console.log('success but may be undefined'); }, err => { console.log('error'); });