Angular HTTP 错误空无类型响应

Question

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

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

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

MyComponent.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();
            }
        }
    );
}

MyService.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) 的方式使用它。

Answer 2

似乎是预检 Http OPTIONS 请求的问题。您是否验证了响应类型。

如果是这个问题，您可以通过如下修改 content-header 来避免预检请求。

   $http.defaults.headers.post["Content-Type"] = "text/plain"

在此处阅读更多信息：Why am I getting an OPTIONS request instead of a GET request?