Nativescript/Angular extending HttpClient

为君一笑 提交于 2020-01-16 09:41:50

问题


I'm since I'm adding nativescript-https to my Nativescript/Angular app I'm making a wrapper. So, since Nativescript's NativeScriptHttpClientModule uses Angular's HttpClientModule I'm extending HttpClient, and I created the http-client.ts file:

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import * as Https from 'nativescript-https'

export interface IRequestOptions {
    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
    body?: any;
}

export function applicationHttpClientCreator(http: HttpClient) {
    return new ApplicationHttpClient(http);
}

@Injectable()
export class ApplicationHttpClient {
    public constructor(public http: HttpClient) {
    }

    /**
     * GET request
     * @param {string} endPoint it doesn't need / in front of the end point
     * @param {IRequestOptions} options options of the request like headers, body, etc.
     * @returns {Observable<T>}
     */
    public Get<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
        return from(Https.request({
            url: endPoint,
            method: 'GET',
            timeout: 30,
            body: options.body
            //   params: options.params
            // headers: options.headers
        }).then((res: any) => {
            return res.content;
        }).catch((err) => {
            console.log('err1: ' + err);
            throw err;
        }))
    }

    /**
     * POST request
     * @param {string} endPoint end point of the api
     * @param {Object} params body of the request.
     * @param {IRequestOptions} options options of the request like headers, body, etc.
     * @returns {Observable<T>}
     */
    public Post<T>(endPoint: string, params: Object, options?: IRequestOptions): Observable<T> {

        return from(Https.request({
            url: endPoint,
            method: 'POST',
            timeout: 30,
            body: options.body
            //   params: options.params
            // headers: options.headers
        }).then((res: any) => {
            return res.content;
        }).catch((err) => {
            console.log('err1: ' + err);
            throw err;
        }))
        // return this.http.post<T>(this.api + endPoint, params, options);
    }
}

P.S. I commented on the two lines

        //   params: options.params
        // headers: options.headers

to prevent the error

Type 'Observable' is not assignable to type 'Observable'.

Anyway, I added my file to providers in app.module.ts:

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpClientModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [
    {
      provide: ApplicationHttpClient,
      useFactory: applicationHttpClientCreator,
      deps: [HttpClient]
    }
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

This is an example of API call:

getUsers() {
    let httpParams = new HttpParams();
    httpParams = httpParams.append('...', ...);
    return this.http.get<any>('....url....', {
        params: httpParams
    })
        .pipe(
            map((res) => {
                if (res && res.error) {
                    throw res.error;
                } else {
                    return res.response;
                }
            })
        );
}

Application builds fine and I can use it, but my http-client.ts is ignored, no console.log or breakpoints on it are triggered, the API calls are same as before. What I'm missing?

Thanks!

来源:https://stackoverflow.com/questions/59756111/nativescript-angular-extending-httpclient

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!