是否可以为 angular 2 http 创建一个稍微不同版本的 subscribe() 方法？答案

【问题标题】：Is it possible to create a slightly different version of subscribe() method for angular 2 http?是否可以为 angular 2 http 创建一个稍微不同版本的 subscribe() 方法？
【发布时间】：2017-05-20 20:38:28
【问题描述】：

我正在尝试angular2。我发现我们应该使用subscribe() 方法来检索get 或post 方法的结果：

this.http.post(path, item).subscribe(
  (response: Response)=> {console.log(response)},
  (error: any)=>{console.log(error)}
);

但是我想创建一个自定义版本的 subscribe() 方法，它有一个错误回调函数，它的错误参数不是 any 并且是强类型的。因此，我们将能够以这种方式订阅 Observable：

this.http.post(path, item).subscribe(
  (response: Response)=> {console.log(response)},
  (error: HttpError)=>{console.log(error.body)}
);

我声明HttpError如下：

import { ModelState } from "app/Base/model-state";
import { ModelStateDictionary } from "app/Base/model-state-dictionary";
import { ErrorBody } from "app/Base/error-body";

export class HttpError {
    public ok: boolean;
    public status: number;
    public statusText: string;
    public type: number;
    public url: string;
    public body: ErrorBody;
    public static create(error: any): HttpError {
        let errorBody: ErrorBody = new ErrorBody();
        let body = JSON.parse(error._body)
        errorBody.message = body.message == null ? "" : body.message;
        errorBody.modelStateDictionary = new ModelStateDictionary();
        if (body.modelState != null) {
            for (let key in body.modelState) {
                let modelState: ModelState = new ModelState();
                modelState.Value = key;
                for (let value in body.modelState[key]) {
                    modelState.Error.push(value);
                }
                errorBody.modelStateDictionary.push(modelState);
            }
        }
        let httpError: HttpError = new HttpError();
        httpError.body = errorBody;
        httpError.ok = error.ok;
        httpError.status = error.status;
        httpError.statusText = error.statusText;
        httpError.type = error.type;
        httpError.url = error.url;
        return httpError;
    }
}

但是在某个地方我需要在订阅前调用create() 方法，并将java 对象错误转换为HttpError。我想我需要创建一个自定义的 Observable 或者可能使用map()。我是TypeScript 和Reactive programming 的新手。您能否解释一下如何进行这种转换，以便用户可以使用更好的 subscribe() 版本？

【问题讨论】：

这里的错误块不是你认为的。您正在寻找response.status，因为在这种情况下，“4xx”和“5xx”状态代码实际上并不是一个例外。有关更多详细信息，请参阅 Angular 文档中的 Response
您在这里的普遍困惑是试图将其委托给.subscribe()，这是一种与请求无关的方法。如上所述，http 服务方法只返回 Response 类的 Observable。将Observable 视为“传输介质”，因为它所携带的Response 很重要。这里的“错误”中的“异常”类似于套接字连接失败或超时。

标签： angular typescript rxjs angular2-services

【解决方案1】：

首先，我相信 Angular 中的 http.post 只是封装了 HTTP 响应。以下来自 Angular 源代码。

function httpRequest(backend: ConnectionBackend, request: Request): Observable<Response> {
  return backend.createConnection(request).response;
}

这里的 response 或 error 实际上是 HTTP 响应对象。

this.http.post(path, item).subscribe(
  (response: Response)=> {console.log(response)},
  (error: any)=>{console.log(error)}
);

我认为您可以在 Observable 中扩展您想要的方法来处理响应并获取您定义的对象。像这样的东西。http.post(path, item).castHttpError().subscribe()

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md

但是，我不确定这是否安全，因为您正在扩展一个可靠的库。至少，Angular 不建议开发人员创建他/她自己的 Angular 发行版。你可以试试看。

最后，我建议你编写一个实用方法来实现这一点，这可能是多余的，但没有坏处。

this.http.post(path, item).subscribe(
  response => { console.log(response); },
  error => {
    console.log(toHttpError(error).body);
  }
);

【讨论】：