Home > Mobile >  How put query params in Obsrvable call?
How put query params in Obsrvable call?

Time:05-26

How do I get to put this query params

users?page=2

in this call?

```
  /**
   * get users
   * * User Signin
   *
   * @param credentials
   * @returns observable
   */
  getUsers(): Observable<Users> { 
    this.spinner.show();
    const options: Options = {
      type: 'get',
      path: '/users',    
      queryParams: '', // here is the ?page=2
      

    };
    return this.apiCall.call(options).pipe(
      tap((res) => {
       
        console.log('El servicio de usuarios funciona', res);
      }),
      finalize(() => {
        this.spinner.hide();
      }),
      catchError((er) => this.apiCall.handleError(er))
    );
  }
```

I get the page data from the same call These

thanks for all i'm stuck on this

CodePudding user response:

you can do in this way:

httpmethod(): Observable<any> {
    let params = new HttpParams();
    params.set(paramName, paramValue);
    return this.http.get<any>(url, {
      params: params,
    });
}

EDIT

in your case you must first import angular's http service into the constructor, and then you can use service to do api call:

constructor(private http: HttpClient) {}

getUsers(): Observable<Users> { 
    this.spinner.show();

    let params = new HttpParams();
    params.set(paramName, paramValue);

    return this.http.get<Users>(options, {params:params} ).pipe(
      tap((res) => {
       
        console.log('El servicio de usuarios funciona', res);
      }),
      finalize(() => {
        this.spinner.hide();
      }),
      catchError((er) => this.apiCall.handleError(er))
    );
  }

CodePudding user response:

hmm but I need do it whit these 'apiCall' service

import { HttpClient, HttpHeaders, HttpParameterCodec, HttpRequest } from '@angular/common/http';
import { Injectable, Optional } from '@angular/core';
import { Configuration } from './configuration';
import { Options } from './model/options';
import { CustomHttpParameterCodec } from './encoder';
import { map, catchError } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ApiCallService {
  protected basePath = 'https://localhost';
  public configuration = new Configuration();
  public defaultHeaders = new HttpHeaders();
  public encoder: HttpParameterCodec;

  constructor(protected httpClient: HttpClient, @Optional() configuration: Configuration) {
    if (configuration) {
      this.configuration = configuration;
    }

    if (typeof this.configuration.basePath !== 'string') {
      if (typeof this.basePath !== 'string') {
        this.basePath = this.basePath;
      }
      this.configuration.basePath = this.basePath;
    }
    this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
  }

  /**
   * createCall
   * Create configurable api call for all call types: get/post/put/patch/delete
   *
   * @param dataCall
   *  Configurable Path
   *  Configurable with all different input types: parameters, query params and body
   *  Configurable bearer token
   * @param options
   * @returns Observable
   */

  public createCall(options: Options): Observable<any> {
    // Create Default Header
    let headers = this.defaultHeaders;

    // Check url config
    this.configuration.basePath = this.configuration.basePath ? this.configuration.basePath : this.basePath;

    // Add headers
    const queryHeaders: any = {};

    if (options.hasOwnProperty('headers')) {
      Object.assign(queryHeaders, options.headers);
    }

    for (const h in queryHeaders) {
      if (queryHeaders.hasOwnProperty(h)) {
        headers = headers.set(h, queryHeaders[h]);
      }
    }

    // authentication (bearer) required
    if (this.configuration.accessToken || options.accessToken) {
      const accessToken = this.configuration.accessToken || options.accessToken;
      headers = headers.set('Authorization', 'Bearer '   accessToken);
    }
    let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;

    if (httpHeaderAcceptSelected === undefined) {
      // to determine the Accept header
      const httpHeaderAccepts: string[] = ['application/json'];
      httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    }

    if (httpHeaderAcceptSelected !== undefined) {
      headers = headers.set('Accept', httpHeaderAcceptSelected);
    }

    // Choose http Call
    let params = '';

    if (options.params) {
      options.params.forEach((param) => {
        params = params   `/${encodeURIComponent(String(param))}`;
      });
    }
    const url = `${this.configuration.basePath}${options.path}`;

    const typesCall = {
      get: this.httpClient.get(`${url}${params}`, {
        params: options.queryParams,
        headers,
      }),
      put: this.httpClient.put(url, options.body, {
        params: options.queryParams,
        headers,
      }),
      post: this.httpClient.post(url, options.body, {
        params: options.queryParams,
        headers,
      }),
      patch: this.httpClient.patch(url, options.body, {
        params: options.queryParams,
        headers,
      }),
      delete: this.httpClient.delete(`${url}${params}`, {
        params: options.queryParams,
        headers,
      }),
    };
    return typesCall[options.type];
  }

  /**
   * call
   * generate call and set store if configured
   *
   * @param options
   * @return observable response
   */
  call(options: Options): Observable<any> {
    return this.createCall(options).pipe(
      map((res) => res),
      catchError(this.handleError)
    );
  }

  /**
   * handleError
   * return handle Error
   *
   * @param error
   * @returns
   */
  public handleError(error: Response): Observable<any> {
    // console.error('An error occurred', error); // for demo purposes only
    return throwError(() => error || 'server error');
  }
}

I need do it whit these service i think i can get param call in these service but i dont rememeber how

  • Related