angular - 离子本地存储未获取数据
问题描述
我正在尝试获取使用离子存储存储的令牌并将其存储在全局变量public token = ''
中。但是每次我使用this.token
该值访问它时都不会改变。
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
const TOKEN_KEY = 'access_token';
@Injectable()
export class ContactProvider {
public url = 'myapi-link';
public token = '';
constructor(
private storage: Storage,
private http: HttpClient
) {
}
loadToken(){
this.storage.get(TOKEN_KEY).then((token)=>{
this.token = token;
console.log(this.token);
});
}
setHeaders(default_content_type = 'application/json'){
let headers = new HttpHeaders();
headers = headers.set('Content-Type', default_content_type)
.set('Authorization', 'Bearer ' + this.token)
return headers;
}
getData(type){
this.loadToken();
let headers = this.setHeaders();
return this.http.get(this.url + type, {headers: headers});
}
}
调用 时this.setHeaders()
,this.token
不会改变。
解决方案
就像其他人指出的那样,您需要了解 Promise 是如何工作的。方法如下: 1:LoadToken 需要返回一个承诺:
loadToken(){
return this.storage.get(TOKEN_KEY);
}
注意return关键字,它将返回 storage.get() 返回的承诺
2:使用该承诺并等待它完成,然后再继续:
async getData(type){
this.token = await this.loadToken();
let headers = this.setHeaders();
return this.http.get(this.url + type, {headers: headers});
}
请注意 getData 方法名称前面的async关键字,这表明您将等待在其中完成承诺。然后是await关键字,它将确保它之后的其余代码仅在 promise 解决时执行。
由于 Promise 也可能被拒绝,因此您需要执行以下操作:
async getData(type){
try {
this.token = await this.loadToken();
let headers = this.setHeaders();
return this.http.get(this.url + type, {headers: headers});
} catch (error) {
//Handle your error here
}
}
推荐阅读
- azure - docker - Azure Container Instance - 如何使我的容器可从外部访问和识别?
- php - SQL注入:带/不带数组的值
- rest - 在 BigCommerce 中获得所有退款
- c# - 在 Entity Framework 中修改同一个实体是否会同步将实体保存到数据库中?抛出异常?
- c - 初始化使指针在编译时从整数而不进行强制转换
- kubernetes - 从 kubernetes-master 中删除 kube-apiserver(仅用于测试和理解)
- linux - 显示磁盘使用百分比的差异
- cassandra - 如何初始化多节点 Cassandra 集群?
- typescript - 使用泛型类型重载 TypeScript 函数
- javascript - 可排序 - 更新现有数组 - jQuery