angular - 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));
解决方案
我通过将获取请求相关的代码放入一个新的异步函数中解决了这个问题,而不是在带有异步内联函数的构造函数中。
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);
...
}
推荐阅读
- spring - 配置在应用程序启动之前发生的日志
- javascript - 对数值进行排序的 Java 脚本表
- flutter - 我如何实时调试单个小部件 ui?
- python - 如何用python平滑图形
- sql - 比较日期值和今天
- javascript - Javascript:CreateElement将onClick函数放在其他元素上
- node.js - Jest + MockImplementationOnce + 没有第二次工作
- python - 如何使用 Python 在 N 个不均匀的部分中划分一个数值并遵循一组最小和最大要求?
- pandas - 如何将一个或多个分类变量编码为一个特征
- node.js - Express js 为一条路线使用两个中间件