我有一个如下所示的数据服务:
@Injectable()
export class DataService {
baseUrl = 'http://localhost'
constructor(
private httpClient: HttpClient) {
}
get(url, params): Promise<Object> {
return this.sendRequest(this.baseUrl + url, 'get', null, params)
.map((res) => {
return res as Object
})
.toPromise();
}
post(url, body): Promise<Object> {
return this.sendRequest(this.baseUrl + url, 'post', body)
.map((res) => {
return res as Object
})
.toPromise();
}
patch(url, body): Promise<Object> {
return this.sendRequest(this.baseUrl + url, 'patch', body)
.map((res) => {
return res as Object
})
.toPromise();
}
sendRequest(url, type, body, params = null): Observable<any> {
return this.httpClient[type](url, { params: params }, body)
}
}
如果我收到HTTP错误(即404),我会得到一个令人讨厌的控制台消息: ERROR Error: Uncaught (in promise): [object Object] 来自 core.es5.js 如何在我的情况下处理它?
9 回答
根据您的需要,您有一些选择 . 如果要基于每个请求处理错误,请在您的请求中添加
catch
. 如果要添加全局解决方案,请使用HttpInterceptor
.打开here the working demo plunker以获取以下解决方案 .
tl;博士
在最简单的情况下,您只需添加
.catch()
或.subscribe()
,如:但是有更多细节,见下文 .
方法(本地)解决方案:记录错误并返回回退响应
如果只需要在一个地方处理错误,可以使用
catch
并返回默认值(或空响应),而不是完全失败 . 你也不需要.map
只是为了施放,你可以使用通用函数 . 资料来源:Angular.io - Getting Error Details .所以,一个通用的
.get()
方法,就像:即使URL上的服务状况不佳,处理错误也会使应用程序继续运行 .
当您想要为每个方法返回特定的默认响应时,此每请求解决方案很有用 . 但是,如果您只关心错误显示(或具有全局默认响应),则更好的解决方案是使用拦截器,如下所述 .
运行working demo plunker here .
高级用法:拦截所有请求或响应
再次,Angular.io guide显示:
当然,这可以用来以非常简单的方式处理错误(demo plunker here):
Providing your interceptor: 简单地声明上面的
HttpErrorInterceptor
并不会导致您的应用使用它 . 您需要将它作为拦截器提供wire it up in your app module,如下所示:Note: 如果同时存在错误拦截器和一些本地错误处理,则很可能不会触发本地错误处理,因为拦截器在到达本地错误处理之前始终会处理错误 .
运行working demo plunker here .
随着
HTTPClient
API的到来,不仅更换了Http
API,而且添加了一个新的HttpInterceptor
API .AFAIK的目标之一是为所有HTTP传出请求和传入响应添加默认行为 .
因此,假设您要添加 default error handling behavior ,将
.catch()
添加到所有可能的http.get / post / etc方法中是非常难以维护的 .这可以通过以下方式完成,例如使用
HttpInterceptor
:// app.module.ts
OP的一些额外信息:在没有强类型的情况下调用http.get / post / etc不是API的最佳用途 . 您的服务应如下所示:
从您的服务方法而不是
Observables
返回Promises
是另一个错误的决定 .还有一条建议:如果您使用的是 TYPE 脚本,那么请开始使用它的类型部分 . 您将失去该语言的最大优势之一:了解您正在处理的值的类型 .
如果您想要一个角度服务的好例子,请看一下at the following gist .
让我更新acdcjunior关于使用HttpInterceptor和最新RxJs功能(v.6)的答案 .
你可能想要这样的东西:
这在很大程度上取决于您如何使用您的服务,但这是基本情况 .
在@acdcjunior回答之后,这就是我实现它的方式
服务:
呼叫者:
相当简单(与之前的API相比) .
来自(复制并粘贴)Angular official guide的来源
如果您发现自己无法捕获此处提供的任何解决方案的错误,则可能是服务器未处理CORS请求 .
在那种情况下,Javascript,更不用说Angular,可以访问错误信息 .
在控制台中查找包含
CORB
或Cross-Origin Read Blocking
的警告 .此外,语法已更改以处理错误(如每个其他答案中所述) . 你现在使用管道运营商,如下:
通过使用Interceptor,您可以捕获错误 . 以下是代码:
你可以更喜欢this blog ..给它一个简单的例子 .