Angular HTTP 错误空无类型响应

Question

我有一个进行 HTTP 调用的 Angular/JHipster 应用程序。我想在我的 Observable 订阅中进行错误处理。

但是，当第一次调用错误处理程序时，err 对象不是响应，它是一个原始的 {} Object .所有后续的错误处理程序调用都有一个有效的 Response。

为什么会发生这种情况，我该如何解决？

我的组件.ts:

handleClickPost() {
    this.myService.doPost(this.body)
    .subscribe(
        (res: Response) => {
            this.responseOk = true;
        },
        (err: Response) => {
            // This is a HACK!
            // For some reason, the first time this error handler is invoked (after page load),
            // the response body is empty here and serializes to "{}".
            if (JSON.stringify(err) === '{}') {
                // first request always reaches here... WHY?
                this.handleClickPost(); // NB: workaround
                // err.json(); // results in null "method not found" error
            } else {
                // second request always reaches here... WHY?
                // (I want all requests to go here with a valid 'Response' object)
                this.showRequestFailed = true;
                this.errorResponse = err.json();
            }
        }
    );
}

我的服务.ts:

doPost(body): Observable<Response> {
    return this.http.post(this.resourceUrl, body);
}

我的劣质解决方法是在第一次空体失败后再次调用该方法以获得类型化的Response。

注意:这种行为在 Angular 2 和 Angular 4 中都会发生。

Answer 1

首先，您必须检查几项以确保您的设置正确。

1. 检查服务器端是否为第一次请求发送正确的 JSON 编码响应，即响应是否正确序列化。

2. 如果您要将 json 数据发布到服务器，请检查 POST 请求的负载 this.body 是否已转换为 json 字符串。你应该使用JSON.stringify(this.body) 如果您发送的是 json 数据，则在发送请求之前。

3. 您应该在 post() 方法中使用 map()/catch() 来实际映射响应并捕获实际错误。

所以你的代码应该如下所示

MyService.ts:

doPost(body:any): Observable<Response> {
   let payload = JSON.stringify(body); // Stringify payload if you are using JSON data
   let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON for json request
   let options      = new RequestOptions({ headers: headers }); // Create a request option
   return this.http.post(this.resourceUrl, payload,options)
                        .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
                        .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any;
}

MyComponent.ts:

handleClickPost() {
    this.myService.doPost(this.body)
    .subscribe(
        (res: any) => {
            this.responseOk = true;
        },
        (err: any) => {
            // Log errors if any
            console.log(err);
           }
        }
    );
}

或者您可以为 catch() 方法创建一个单独的错误处理程序，如下所示

private handleError(error: any) {
      let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
       console.log(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }

并在您的服务类中以这种方式使用 .catch(this.handleError)。