typescript - tutorial - install angular 6

El tipo ''void'' no se puede asignar al tipo ''ObservableInput<{}>''

Question

Este error comenzó a aparecer después de migrar a TS 2.2.2, así que asumo que ese es el problema ... El código no dejó de funcionar, pero ahora recibí ese error e intenté algunas cosas como devolver un observable vacío Al capturar la excepción re-lanzada y devolver un objeto, nada parecía funcionar. ¿Por qué sucede esto ahora? ¿No debería entender que estoy volviendo a lanzar la excepción y no espero una devolución? ¿Estoy malinterpretando el error?

Esta es la descripción completa del error:

Aquí está el código completo:

return request
.map((res: Response) => res.json())
.catch((error: any) => {
// todo: log?
if (error.status == 500) {
this.alertService.showError(error.statusText);
} else if (error.status == 588) {
this.alertService.showAlert(error.statusText);
}
Observable.throw(error.statusText);
});

Intenté devolver el Observable, pero mi método de envoltura espera una devolución de tipo T , que es la devolución de mi solicitud de deserialización ( map(...) ). Si devuelvo el throw este es el error que recibo:

[ts] El tipo ''Observable'' no se puede asignar al tipo ''T''

Estoy usando:

• Angular4
• Mecanografía 2.2.2

Answer 1

A veces cuando llamas catch sin usar la función de flecha como abajo

getUserList() {
return this.http.get(this.constURL + ''/loans/all'', this.headerOptions)
.catch(this.handleError);
}
handleError(error: Response) {
if (error.status == 500) {
this.router.navigate([''/login'']);
} else {
return Observable.throw(error);
}
}

entonces da error de

ERROR TypeError: no se puede leer la propiedad ''navegar'' de undefined que no recibe esto

Debido a que en la función handleError, este objeto no es accesible ... si usted consola esto.ruta, entonces obtendrá indefinido ... así que este objeto no funciona y no obtiene todos los métodos disponibles del enrutador

Así que tienes que usar la función de flecha aquí como abajo

getUserList() {
return this.http.get(this.constURL + ''/loans/all'', this.headerOptions)
.catch(error => {
return this.handleError(error);
});
}
handleError(error: Response) {
if (error.status == 500) {
this.router.navigate([''/login'']);
} else {
return Observable.throw(error);
}
}

Además, si no ha mencionado el retorno para la función handlerError, entonces volverá a aparecer el error como

El argumento de tipo ''(error: cualquiera) => void'' no se puede asignar a un parámetro de tipo

Por lo tanto, es necesario escribir return para la función handlerError.

Consulte here detalladamente. Él ha explicado el código muy bien con todos los posibles errores y la solución de eso.

Answer 2

Esta es una respuesta para angular 6 con RXJS 6. En su función de solicitud, se vería similar a esto. Tenga en cuenta que catch se ha reemplazado con catchError y Observable.throw ahora es throwError . También en RXJS 6 usamos pipe para unir una secuencia de funciones que deseamos realizar en lugar del encadenamiento de puntos previamente.

//In your service
getData(url: string): Observable<any> {
let options = this.getHTTPOptions();
return this.http.get<any>(url, options).pipe(
catchError( (err: any, caught: Observable<any>) => { return
throwError(this.generalErrorHandler(err, caught)) } ) );
}

Entonces puedes tener un manejador de errores. La clave es especificar el return la palabra clave en la función catchError anterior y devolver el error en el controlador. La flecha ( => ) le permite pasar el contexto de la función de llamada al controlador de errores, lo que significa que puede hacer cosas interesantes como this.router.navigate([''someroute'']); (Si tiene el enrutador importado en su servicio)

//In your service
generalErrorHandler(error: any, caught: Observable<any>): Observable<any> {
console.log(''error caught: '', error);
if( error.error.status == "INVALID_TOKEN" || error.error.status == "MAX_TOKEN_ISSUE_REACHED"){
console.log(''token has expired'');
this.logout();
return error;
}
return error;
}

Algunas importaciones clave para que esto funcione:

//Imports for the service
import { HttpClient, HttpHeaders, HttpErrorResponse } from ''@angular/common/http'';
import { Http, Response } from ''@angular/http'';
import { catchError, map } from ''rxjs/operators'';
import { Observable, throwError, of} from ''rxjs'';

Y por último suscribirse a la solicitud para obtener sus datos:

//In your component, don''t forget to import your service
let response$ = this.someService.getData(''url here'');
response$.subscribe(
data => { console.log(''do stuff to data here'', data); },
err => { console.log("couldn''t get data, maybe show error to user"); },
() => { console.log(''function that is called upon finish''); }
);

Answer 3

Tienes que devolver el observable.

 return request
.map((res: Response) => res.json())
.catch((error: any) => {
// todo: log?
if (error.status == 500) {
this.alertService.showError(error.statusText);
} else if (error.status == 588) {
this.alertService.showAlert(error.statusText);
}
return Observable.throw(error.statusText);
});