从 Angular 2 获取错误信息

Question

我在我的服务中有以下代码：

myService.ts

makeHttpGetRequest(url){

        return Observable.interval(config.SUPERVISOR_REFRESH_INTERVAL * 1000)
            .switchMap(() => this.http.get(url))
            .map(res => res.json())
            .timeout(config.REQUEST_TIMEOUT * 1000, new Error('Time out occurred'))

    }

在我的组件文件中，

myComponent.ts

ngOnInit(){
        this._myService.makeHttpGetRequest(myurl)
            .subscribe(
                data => {
                    this.supervisorServers = data;
                    }

                },
                error => {
                    this.error = true;
                    console.log(error); //gives an object at this point
                    this.showError(error);
                }
            );
    }

我希望在出现例如无效的url时能够打印错误信息。当我打印错误信息时，我得到一个对象（可能是响应对象），如下所示：

我希望在出现例如无效的url时能够打印错误信息。当我打印错误信息时，我得到一个对象（可能是响应对象），如下所示：

Object { _body: error, status: 200, statusText: "Ok", headers: Object, type: 3, url: null }

如果我打开这个，我找不到错误信息。有没有更好的方法来获取精确的错误信息？

- kosta

Answer 1

错误信息即使在这种情况下也包含在响应正文中。请参见错误事件处理程序onError函数：

• https://github.com/angular/angular/blob/master/modules/@angular/http/src/backends/xhr_backend.ts#L96

您可以使用响应的json方法来访问它：

error => {
  this.error = true;
  console.log(error.json()); //gives the object object
  this.showError(error.json());
}

编辑

我进一步调查了这个问题。事实上，你无法得到确切的消息。我是指 net::ERR_NAME_NOT_RESOLVED 。XHR不提供它。尽管如此，你可以看到XHR的状态码为0。这可能是一个提示，即在发送请求时出现了问题（实际上没有发送请求）。

error => {
  (...)
  var err = error.json();
  var status = err.currentTarget.status;
  (...)
}

参见这个问题：

• XMLHttpRequest() & net::ERR_NAME_NOT_RESOLVED

- Thierry Templier

---

谢谢回复。我可以访问那个。但是例如，当我有一个无效的URL时，我无法在响应正文中看到错误消息。是否可能获取错误消息以在UI上显示？ - kosta

不客气！实际上，你无法获取XHR对象中的确切消息。话虽如此，你可以依赖于该对象的status字段…我更新了我的答案。 - Thierry Templier

Answer 2

我试了error.error并且它对我有效。它得到了一个对象消息错误。

编辑：

非常抱歉！

请尝试这个：

            error => {
                this.error = true;
                console.log(error.error); 
                this.showError(error.error);
            }

- Jessica Rocha

---

你应该添加更多细节，使你的答案更好地适应上下文。 - JoeG

Answer 3

使用 Angular 5+，您实际上只需使用error.message。

 error => {
                console.log(error.message); 
                this.showError(error.message);
          }

在我的情况下，我正在使用Ionic 3和一个警报框。

 error => {
        loading.dismiss();
        let alert = this.alertCtrl.create({
        title: 'Error: ',
        message:  error.message,//Displays http error message in alert
        buttons: [
                     {
                        text: 'Dismiss',
                        role: 'Yes',
                        handler: () => {}
                     }
                  ]
                });
             alert.present();
             }

以下是记录在控制台中的错误对象片段：

- Stephen Romero

---

error.message 给了我很长的堆栈跟踪信息，但我不需要那一部分。我可以使用 split('at') 来截取它，但这种方式不够优雅，有没有更好的解决方案呢？我希望在这个线程中能找到更好的解决方法。 - arm

@arm 这最终取决于您收到的错误类型。我曾经遇到过消息不存在的情况，但您可以通过 error.message 实例进行导航，或者根据错误类型设置案例以获取所需内容。 - Stephen Romero

Answer 4

您可以将错误对象转换为字符串以打印其字符串值。

const errStr = JSON.stringify(error);
console.log(errStr); 

- Ahmed Nabil