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

Angular 2: Enhancing Textareas with Emoji Insertion

Refresh the content with an embedded iframe

The "add to cart" button is unresponsive

Employing CSS animations to elevate div elements

Angular Material Rotate Ink Bar to Vertical Orientation

Guide on setting an instance property through a callback function triggered by the instance

Troubleshooting Issues with AngularJS HTTP.get Requests

Enhance your website with the latest jQuery plugins and CSS

Why is the responseText from XMLHttpRequest always stripped of tags in AJAX?

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

Passport is raising a "missing credentials" error upon return

Sending data from the View to the Controller in a Razor MVC3 application involves passing a model along with

What is the proper way to add an SSL cert to an Angular HTTP API request?

Tips for generating a .csv document using data from an array?

I'm curious – what exactly does `useState(null)[1]` do within React hooks?

Leveraging cloud functions on Firebase for maximum efficiency

How can I include inline CSS directly within a string instead of using an object?

Enhance DataTables functionality by including the ability to select which script to execute

The presence of 'eventually' in the Chai Mocha test Promise Property is undefined

Maintaining duplicate values in a JSON stringify operation: Tips for retention