Angular Typescript cookie exists logic

Question

I'm utilizing the "ngx-cookie-service" to work with cookies in my angular project.

I have sumpled across an issue where I check if a cookie exists, if it === false then it should retrieve data from an API, but on the first run it always returns false due to the cookie not existing, but the JSON is not retrieved as seen in this picture.

After another reload it then shows that the cookie exists and retrieves the data successfully as seen in this image.

I'm very confused why it doesn't print the JSON in the first request, but does it in any request following.

Here is my typescript code.

let cookieExists: boolean = this.cookieService.check(this.id);

console.log("Cookie exists: " + cookieExists);

if (cookieExists === false) {
  axios.get('https://localhost:5001/api/Trace/' + this.id)
    .then((response: AxiosResponse<Trace>) => {
      var minutesToAdd = 1;
      var currentDate = new Date();
      var futureDate = new Date(currentDate.getTime() + minutesToAdd * 60000);

      this.cookieService.set(this.id, JSON.stringify(response.data), futureDate, null, null, null, null);
    });
}

console.log(this.cookieService.get(this.id));

Upon the initial request, the data should be printed in the console, just like in the second image.

Async code that I have tried, with the same result.

let cookieExists: boolean = this.cookieService.check(this.id);

console.log("Cookie exists: " + cookieExists);

if (cookieExists === false) {
  const doGetRequest = async () => {
    await axios.get('https://localhost:5001/api/Trace/' + this.id)
      .then((response: AxiosResponse<Trace>) => {
        var minutesToAdd = 1;
        var currentDate = new Date();
        var futureDate = new Date(currentDate.getTime() + minutesToAdd * 60000);

        this.cookieService.set(this.id, JSON.stringify(response.data), futureDate, null, null, null, null);
      });
  };
  doGetRequest();
}

console.log(this.cookieService.get(this.id));

Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Nov 30 '20 at 15:15
I tried doing it inside a async () {} with await before axios.get, but with the same result. — Alexander Bruun, Nov 30 '20 at 15:18
`"I tried doing it inside a async () {} with await before..."` ← Please update the code in your question with your latest attempt. Please also show all the relevant code including the method signature and how it is called. — Igor, Nov 30 '20 at 15:23
What I have tried is what I just said. I wrapped the get request with async () => {} and put await in front of axios.get. Same result. — Alexander Bruun, Nov 30 '20 at 15:24
If you want to get help, you should update the code in your question with your latest attempt. — Drag13, Nov 30 '20 at 15:27
I added the updated code, hopefully someone can spot what I'm doing incorrectly. — Alexander Bruun, Nov 30 '20 at 15:36

score 0 · Answer 1 · answered Dec 01 '20 at 09:38

I solved the issue by taking the get request related code into a new function that is Async instead of inside the constructor with Async inline function.

constructor(...) {
  this.doWork();
}

async doWork() {
  ...

  let cookieExists: boolean = this.cookieService.check(this.id);

  if (cookieExists === false) {
    await axios.get('https://localhost:5001/api/Trace/' + this.id)
      .then((response: AxiosResponse<Trace>) => {
        var minutesToAdd = 5;
        var currentDate = new Date();
        var futureDate = new Date(currentDate.getTime() + minutesToAdd * 60000);

        this.cookieService.set(this.id, JSON.stringify(response.data), futureDate, null, null, null, null);
      });
  }

  let json: string = this.cookieService.get(this.id);
  this.trace = JSON.parse(json);
  
  ...
}

Angular Typescript cookie exists logic

1 Answers1