迁移到TS 2.2.2后,这个错误开始弹出,所以我假设这是问题...代码没有停止工作,但现在我收到了这个错误,我尝试了一些事情,比如返回一个空的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);
}
Observable.throw(error.statusText);
});
我尝试返回Observable,但我的包装器方法需要返回类型T
,这是我的反序列化请求(map(...)
)的返回。如果我确实返回throw
这就是我得到的错误:
[ts]类型'Observable'不能分配给'T'
我正在使用:
- Angular4
- Typescript 2.2.2
答案 0 :(得分:53)
你必须返回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);
});
答案 1 :(得分:7)
有时当你在不使用箭头功能的情况下调用catch时
getUserList() {
return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
.catch(this.handleError);
}
handleError(error: Response) {
if (error.status == 500) {
this.router.navigate(['/login']);
} else {
return Observable.throw(error);
}
}
然后它给出错误
错误类型错误:无法读取未定义的属性“导航”未获取此
因为在handleError函数中这个对象是不可访问的..如果你控制this.router那么你将得到未定义的.. 所以这个对象不起作用,并没有让路由器获得所有可用的方法
所以你必须在这里使用箭头功能,如下所示
getUserList() {
return this.http.get(this.constURL + '/api/url/here', this.headerOptions)
.catch(error => {
return this.handleError(error);
});
}
handleError(error: Response) {
if (error.status == 500) {
this.router.navigate(['/login']);
} else {
return Observable.throw(error);
}
}
此外,如果你没有提到returnError函数的返回,那么它将再次抛出错误,如
类型的参数'(错误:任何)=> void'不能分配给
类型的参数因此必须为handlerError函数键入return。
详细检查here。他已经很好地解释了所有可能的错误以及解决方案......我的工作
答案 2 :(得分:4)
这是RXJS 6对angular 6的回答。
在您的请求函数中,它看起来与此类似。请注意,catch
已替换为catchError
,而Observable.throw
现在是throwError
。同样在RXJS 6中,我们使用管道将我们希望执行的一系列功能结合在一起,而不是之前的点链。
//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)) } ) );
}
然后您可以拥有一个错误处理程序。关键是在以上两个return
函数中都指定关键字catchError
并在处理程序中返回错误。
箭头(=>
允许您将调用函数的上下文传递到错误处理程序中,这意味着您可以执行诸如this.router.navigate(['someroute']);
之类的很酷的事情(如果您在服务中导入了路由器)>
//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;
}
一些关键的导入才能使它起作用:
//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';
最后,订阅请求以获取您的数据:
//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'); }
);
答案 3 :(得分:2)
return Observable.throw(error);
可观察对象。 throw 已弃用,在拦截器中使用像这样的 throwError 运算符
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
return next.handle(request).pipe(
catchError(err => {
if (err.status === 401) {
// remove Bearer token and redirect to login page
this.router.navigate(['/auth/login']);
}
return throwError( err );
}));
}