Angular 5 中 ResponseType 的替代方案是什么？答案

【问题标题】：What's the alternative for ResponseType in Angular 5?Angular 5 中 ResponseType 的替代方案是什么？
【发布时间】：2018-02-11 17:44:47
【问题描述】：

我正在尝试使用泛型重写 http 请求的包装器。在 Angular 5 之前，Observable<responseType> 可用。我正在寻找通用 responseType 的替代方案。我的代码如下。

request(endpoint: string, options?: RequestOptions, apiOptions?: IApiServiceOptions): Observable<any> {
        options = options || {method: 'GET'};
        apiOptions = apiOptions || {};

        // build url
        const url = `${this.baseUrl}${endpoint}`;
        this.log.debugApiCall(url, this.source, options);

        // set headers
        const authToken = this.authStorage.getAuthenticationToken(this.service);

        let headers = new HttpHeaders();

        if (authToken) {
          headers = headers.set('Authorization', `Bearer ${authToken.jwtToken}`);
        }
        headers = headers.set('Content-Type', 'application/json');

        options.headers = headers;

        // make request and handle errors
        return this
          .http
          .request(options.method, url, options)
          .do((req) => {
            this.log.debugApiResponse(url, this.source, req);
          })
          .catch((res: HttpErrorResponse) => {
            switch (res.status) {
              case 0:
                this.log.error(res, `>>server down<<: ${res} - if the server is up, make sure this isn't a CORS error`);
                this._serverDown$.next();
                return Observable.throw(res);
              case 401:
                this.log.debug(`authentication error: ${res}`);

                if (!apiOptions.disableServerDown) {
                  this._authError$.next(authToken);
                } else {
                  this.log.debug('authError$ not emitted since apiOptions.disableServerDown === true');
                }

                return Observable.throw(res);
              default:
                this.log.error(res, 'Unexpected Error');
                return Observable.throw(res);
            }
          });
      }

      get(url: string, options?: RequestOptions, apiOptions?: IApiServiceOptions): Observable<any> {
        options = options || {};
        options.method = 'GET';

        return this.request(url, options, apiOptions);
      }

      post(url: string, body: any, options?: RequestOptions, apiOptions?: IApiServiceOptions): Observable<any> {
        options = options || {};
        options.method = 'POST';
        options.body = body;

        return this.request(url, options, apiOptions);
      }

      put(url: string, body: any, options?: RequestOptions, apiOptions?: IApiServiceOptions): Observable<any> {
        options = options || {};
        options.method = 'PUT';
        options.body = body;

        return this.request(url, options, apiOptions);
      }

但是，请求方法的返回类型是Observable<HttpResponse<T>>。一般 T 的值应该是多少？到目前为止，我最终得到了任何。对此有何建议？

【问题讨论】：

标签： angular typescript httpclient httpresponse angular5

【解决方案1】：

根据Angular HTTP client documentation 和Typescript generics，您可以在http 请求中的函数名称及其参数之间使用泛型类型。例如。以您的 get 函数为例，您的代码将如下所示

get<T>(url: string, options?: RequestOptions, apiOptions?: IApiServiceOptions): Observable<T> {
    options = options || {};
    options.method = 'GET';

    return this.request<T>(url, options, apiOptions);
}

注意泛型类型<T> 的添加位置。然后你可以简单地通过下一行调用你的函数

someHttpServiceInstance.get<SomeClass>(...some arguments).subscribe(
    (output: SomeClass) => { ... }
);

Proof of concept

【讨论】：

这看起来很有说服力。我会测试并回来。非常感谢@vagrantAI

【解决方案2】：

这个怎么样。

export type ResponseData = ArrayBuffer | Blob | string;

export type RequestResponse = Observable<ResponseData | Object | any
  | HttpEvent<ResponseData | any>
  | HttpResponse<ResponseData | Object>>;

 request(endpoint: string, options?: IRequestOptions, apiOptions?: IApiServiceOptions): Observable<RequestResponse> {
............

【讨论】：

这个帮我修好了。

【解决方案3】：

虽然HttpClient documentation 没有反映这一点并使用any，request 和其他方法是already typed 并允许泛型类型。正如预期的那样，方法签名取决于responseType 和observe 选项，因为结果取决于它们。

【讨论】：