如何使用服务初始化可注入变量

Question

当用户登录时，我使用Ionic2存储来存储用户访问权限凭据。

当用户尝试访问后端api时，我需要向REST客户端提供access_token。

我使用hBoylan的ng2 http包创建了服务最初，包装使用

export class CategoryService extends RESTClient{
categoryList : Category[] = [];
public user:User;
constructor(protected http:Http) {super(http)}
}

我已经使用Angular2DI向构造函数添加了一个UserStorage组件：

let categoryServiceFactory = (http:Http, userStorage:UserStorage) => {
return new CategoryService(http, userStorage);
}
export let categoryServiceProvider = 
{
provide: CategoryService,
useFactory: categoryServiceFactory,
deps: [Http, UserStorage]
}

得到这个：

export class CategoryService extends RESTClient{
categoryList : Category[] = [];
public user:User;
constructor(protected http: Http, protected userStorage: UserStorage)
{
super(http);
this.userStorage.getUser().then((data:User) => {this.user = data})
}

当前我呼叫时

@GET('/itemtype/list')
@Produces<String>()
public getAvailableCategories(): Observable<String> {
return null;
}

我需要使用

protected requestInterceptor(req: Request) {
req.headers.set('Authorization', `Bearer ${this.user.api_credentials.access_token}`)
return req;
}

添加access_token凭证

到目前为止，我在页面组件中的调用必须如下所示：

@Component({
selector: 'page-categories',
templateUrl: 'categories.html',
providers: [User]
})
export class CategoriesPage implements OnInit {
// list of categories
public categories: any;
constructor(public nav: NavController,
public categoryService: CategoryService,
public userStorage: UserStorage,
public user: User) {}
ngOnInit() {
this.userStorage.getUser().then((user: User) => {
this.user = user
this.categoryService.setUser(this.user);
this.categoryService.getAvailableCategories().subscribe(
(data) => { console.log(data) },
error => console.log(error),
() => { });
});
}
// view category
viewCategory(categoryId) {
this.nav.push(CategoryPage, { id: categoryId });
}
showChildren(category: Category) {
category.open = !category.open;
}
openCategoryPage($event, category: Category) {
$event.stopPropagation();
this.nav.push(CategoryPage, { cat_id: category.id })
}
}

之所以看起来是这样，是因为我似乎无法在CategoryService类的构造函数中设置用户。因此，我必须首先从存储中获取User，在类别服务中使用"setter"，然后在getUser().then()函数中嵌套getAvailableCategories()调用。

这是因为getCategories函数是在CategoryService构造函数完成从UserStorage设置用户之前调用的。

我知道这是因为调用是异步的，但我觉得使用setTimeout之类的东西来"等待"getUser调用返回是很糟糕的，而且不是100%可靠的。

还有什么我可以试试的吗？我真的很想打电话给

this.categoryService.getAvailableCategories().then()

并在没有嵌套promise调用的情况下继续。

我愿意做出任何明智的改变，让access_token立即可用。

Answer 1

如果getUser调用是异步的，可以尝试使其同步：)

如果这不是你的选择，有一个语法糖可以帮助你以更好的方式处理异步调用——async/await:

async ngOnInit() {
this.categories = this.categoryService.getCategories();
this.user = await this.userStorage.getUser();
this.categoryService.setUser(this.user);
this.categoryService.getAvailableCategories().subscribe(
(data) => { console.log(data) },
(error) => { console.log(error) },
() => { }
);
}

注意是async ngOnInit，然后是await this.userStorage.getUser()