首页 > 解决方案 > Angular Typescript cookie 存在逻辑

问题描述

我正在使用“ngx-cookie-service”在我的 Angular 项目中使用 cookie。

我总结了一个问题,我检查 cookie 是否存在,如果它 === false 那么它应该从 API 检索数据,但在第一次运行时它总是返回 false,因为 cookie 不存在,但JSON没有检索到如图所示。 在此处输入图像描述

再次重新加载后,它会显示 cookie 存在并成功检索数据,如图所示。

在此处输入图像描述

我很困惑为什么它不在JSON第一个请求中打印,而是在随后的任何请求中打印。

这是我的打字稿代码。

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));

根据初始请求,数据应在控制台中打印,就像在第二张图像中一样。

我尝试过的异步代码,结果相同。

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));

标签: angulartypescript

解决方案


我通过将获取请求相关的代码放入一个新的异步函数中解决了这个问题,而不是在带有异步内联函数的构造函数中。

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);
  
  ...
}

推荐阅读