Setting null for HttpParams during the call

Question

Setting null for HttpParams during the call

I am encountering an issue with HttpParams and HttpHeaders after upgrading my project from Angular 7 to Angular 8. The problem arises when I make a call to the API, as the parameters are not being added. Any assistance in resolving this matter would be greatly appreciated.

Below is the method where I set the headers and params:

fetchJson(url: string, parameters ? : any) {
    this.token = this.cookieService.get('access_token');
    this.contrat_token = this.cookieService.get('contrat_token');

    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', 'Bearer ' + this.token);
    headers = headers.append('contrat_token', this.contrat_token);

    let params = new HttpParams()
    params.set('search', parameters);
    console.log('headers');
    console.log(headers);
    console.log('params');
    console.log(params.toString())

    return this._http.get(url, {
        headers,
        params
      }).pipe(map((resp: any) => {
            if (resp.status === 401 || resp.status == 401 || resp.status.toString() == "401") {
              this.clearCookie();
            } else {
              let reponse = resp;

              if (reponse == -1 || reponse == "-1") {
                this.router.navigate(["/"]);
              }
            }

            return resp;
          }

The method is then called within my services like so:

   getDetailThematiquePrevNext(id: string, typeBase: string) {
        let URL = this.urlDecorator.urlAPIDecorate("DI", "GetDetailThematiqueHeaderPrevNext");
        let params = this.urlDecorator.generateParameters({
            id: id,
            typeBase: typeBase,
          
        });
        return this.apiFetcher.fetchJson(URL, params);
    }

javascript angular typescript

Answer 1

Answer №1

The explanation from Cue is accurate; you should use chaining or apply the same approach as you did for headers.

let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/json');
headers = headers.append('Authorization', 'Bearer ' + this.token);
headers = headers.append('contrat_token', this.contrat_token);

let params = new HttpParams()
params = params = params.set('search', parameters);

A more organized way of writing this would be:

const headers = new HttpHeaders()
    .append('Content-Type', 'application/json')
    .append('Authorization', 'Bearer ' + this.token)
    .append('contrat_token', this.contrat_token);

const params = new HttpParams().set('search', parameters);

Additionally, you can omit the Content-Type header since JSON is the default format.

Answer 2

The explanation from Cue is accurate; you should use chaining or apply the same approach as you did for headers.

let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/json');
headers = headers.append('Authorization', 'Bearer ' + this.token);
headers = headers.append('contrat_token', this.contrat_token);

let params = new HttpParams()
params = params = params.set('search', parameters);

A more organized way of writing this would be:

const headers = new HttpHeaders()
    .append('Content-Type', 'application/json')
    .append('Authorization', 'Bearer ' + this.token)
    .append('contrat_token', this.contrat_token);

const params = new HttpParams().set('search', parameters);

Additionally, you can omit the Content-Type header since JSON is the default format.

Answer 3

Answer №2

It seems that lazy parsing might be the cause of this issue. In order to determine the state, you need to use either get or getAll to access values.

The HttpParams class is used to represent serialized parameters in the MIME type application/x-www-form-urlencoded. This class is immutable and any mutation operations will return a new instance.

On the other hand, the HttpHeaders class represents the header configuration options for an HTTP request. It is recommended to assume that instances are immutable with lazy parsing.

To set your options directly into the instance for both headers and params:

let headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.token,
  'contrat_token': this.contrat_token
});

let params = new HttpParams({
  search: parameters
});

As mentioned by @Siraj, there are alternative methods to set values for headers and params such as set...

let headers = new HttpHeaders().set('name', 'value');
let params = new HttpParams().set('name', 'value');

Or using append...

let headers = new HttpHeaders().append('name', 'value');
let params = new HttpParams().append('name', 'value');

It is important to remember that these methods require chaining as each method creates a new instance.

You can also convert objects like this:

let headerOptions = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.token,
  'contrat_token': this.contrat_token
}

let headers = new HttpHeaders();

Object.keys(headerOptions).forEach((key) => {
  headers = headers.set(key, headerOptions[key]);
});

Avoid binding objects by reference and instead pass them as parameters:

return this._http.get(url, {
  headers: headers,
  params: params
});

Lastly, since your type annotation is "any" for the parameters argument, params expects HttpParamsOptions where values must be annotated as strings.

let params = new HttpParams({
  search: JSON.stringify(parameters)
});

Try

console.log(params.getAll('search'))

, but for a more accurate check on whether headers and params are being sent, the Network tab in DevTools would be a better place to verify.

Answer 4

It seems that lazy parsing might be the cause of this issue. In order to determine the state, you need to use either get or getAll to access values.

The HttpParams class is used to represent serialized parameters in the MIME type application/x-www-form-urlencoded. This class is immutable and any mutation operations will return a new instance.

On the other hand, the HttpHeaders class represents the header configuration options for an HTTP request. It is recommended to assume that instances are immutable with lazy parsing.

To set your options directly into the instance for both headers and params:

let headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.token,
  'contrat_token': this.contrat_token
});

let params = new HttpParams({
  search: parameters
});

As mentioned by @Siraj, there are alternative methods to set values for headers and params such as set...

let headers = new HttpHeaders().set('name', 'value');
let params = new HttpParams().set('name', 'value');

Or using append...

let headers = new HttpHeaders().append('name', 'value');
let params = new HttpParams().append('name', 'value');

It is important to remember that these methods require chaining as each method creates a new instance.

You can also convert objects like this:

let headerOptions = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.token,
  'contrat_token': this.contrat_token
}

let headers = new HttpHeaders();

Object.keys(headerOptions).forEach((key) => {
  headers = headers.set(key, headerOptions[key]);
});

Avoid binding objects by reference and instead pass them as parameters:

return this._http.get(url, {
  headers: headers,
  params: params
});

Lastly, since your type annotation is "any" for the parameters argument, params expects HttpParamsOptions where values must be annotated as strings.

let params = new HttpParams({
  search: JSON.stringify(parameters)
});

Try

console.log(params.getAll('search'))

, but for a more accurate check on whether headers and params are being sent, the Network tab in DevTools would be a better place to verify.

Setting null for HttpParams during the call

Answer №1

Answer №2

Similar questions

Adjusting the navigation image as it passes through various div elements during scrolling

Is it accurate that JavascriptResult displays javascript on the page in a string format?

The retrieval of data from AWS Dynamodb in Node.js is not done synchronously

NextJs 13 unveils its cutting-edge dynamic sitemap feature

I'm torn between whether to calculate on the client side for more requests or on the server side for fewer requests. What should I do?

It is not possible to submit two forms at once with only one button click without relying on JQuery

Display a text field when the onclick event is triggered within a for

How can I set the background of specific text selected from a textarea to a div element?

Divs are not being organized into rows correctly due to issues with Bootstrap styling

Incorporating observables into an existing axios post request

Issues with object changes not reflecting in Vue.js 2.0 component rendering

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

elementToBeClickable is not supported by webdriverio

What is the best way to send JSON data from Express to a JavaScript/jQuery script within a Pug template?

How to implement PayPal integration in PHP

I need assistance with this ajax/javascript/php

Having trouble with the Angular Material component? The element 'mat-option' is not recognized

Changes to the parent state will not be reflected in the child props

Ensure that only the most recent Ajax request is allowed

Stop button from being clicked inside a div when mouse hovers over it