Angular2 中的错误处理

Question

我正在处理从 restful WebApi 后端返回数据的 Angular 2 服务。

我试图让它优雅地处理服务不可用，但是我在错误响应中收到意外信息。

这是代码

update(fund, transactionId:string, showToastOnError: boolean, useCorrectUrl: boolean) {
        let options = this.getStartCall();
        options.headers.append("transaction-id", transactionId)
        let url = fundsUrl + (useCorrectUrl ? "" : "breakTheUrl");
        return this._http.put(url, JSON.stringify(fund), options)
            .map(res => res.json())
            //.retry(5)
            .catch(errorResponse => {
                let res = <Response>errorResponse;
                let err = res.json();
                let emsg = err ?
                    (err.error ? err.error : JSON.stringify(err)) :
                    (res.statusText || 'unknown error');
                this._logger.log(emsg, "The fund was not updated", LogLevel.Error, showToastOnError);
                return Observable.throw(emsg);
            })
            .finally(() => this._spinnerService.hide());

    }

当我查看网络流量时，我看到了预期的 404 错误。

我的问题出在我的 catch 函数上。

这是我看到的值：

JSON.stringify(errorResponse)

{"_body":{"isTrusted":true},"status":200,"statusText":"Ok","headers":{},"type":3,"url":null}"

errorResponse.json() 

bubbles: false
cancelBubble: false
cancelable: false
currentTarget: XMLHttpRequest
defaultPrevented: false
eventPhase: 2
isTrusted: true
isTrusted: true
lengthComputable: false
loaded: 0
path: Array[0]
position: 0
returnValue: true
srcElement: XMLHttpRequest
target: XMLHttpRequest
timeStamp: 1460990458693
total: 0
totalSize: 0
type: "error"
__proto__: XMLHttpRequestProgressEvent

我是不是做错了什么，或者这是 Angular2 beta 15 中的错误？

Answer 1

大多数时候，当在底层 XHR 对象上调用 onerror 回调时，您会得到这样的错误值。请参阅源代码中的这一行：https://github.com/angular/angular/blob/master/modules/angular2/src/http/backends/xhr_backend.ts#L70.

也就是说，它不应该出现在 404 状态代码上，而是出现在像 net::ERR_NAME_NOT_RESOLVED.

这样的错误上

404 状态代码由 onload 回调处理：https://github.com/angular/angular/blob/master/modules/angular2/src/http/backends/xhr_backend.ts#L37.

我用 beta15 进行了测试，但无法重现您的问题。

看到这个 plunkr：https://plnkr.co/edit/SB3KLZlbJT3wm9ATAE0R?p=preview。

Angular2 中的错误处理

Error handling in Angular2

rxjs

asp.net-web-api

angular2-http

angular