Question

我正在尝试使用泛型重写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的价值应该是多少？到目前为止，我最终得到了任何结果。对此有何建议？

Answer 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

Answer 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> {
............

Answer 3

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

什么是Angular 5中ResponseType的替代品？

3 个答案: