So I was working on a new component in Angular and in the ngOninit I have the following asynchronous functions below…
This.getUserProfile needs to be finished before I can call this.getPrivateGroup() and this.getPrivateGroup() needs to be finished before I can call this.loadGroupPosts(). I know I could write these functions inside the callback of the asynchronous requests, but I was wondering if there is a way to keep it in ngOnInit to keep it cleaner?
Anyone has an idea?
JavaScript
x
62
62
1
ngOnInit() {
2
3
this.getUserProfile();
4
5
// my-workplace depends on a private group and we need to fetch that group and edit
6
// the group data before we proceed and get the group post
7
if (this.isItMyWorkplace) {
8
this.getPrivateGroup();
9
}
10
this.loadGroupPosts();
11
}
12
13
getUserProfile() {
14
this._userService.getUser()
15
.subscribe((res) => {
16
this.user = res.user;
17
console.log('log user', this.user);
18
this.profileImage = res.user['profile_pic'];
19
this.profileImage = this.BASE_URL + `/uploads/${this.profileImage}`;
20
}, (err) => {
21
this.alert.class = 'alert alert-danger';
22
if (err.status === 401) {
23
this.alert.message = err.error.message;
24
setTimeout(() => {
25
localStorage.clear();
26
this._router.navigate(['']);
27
}, 3000);
28
} else if (err.status) {
29
this.alert.class = err.error.message;
30
} else {
31
this.alert.message = 'Error! either server is down or no internet connection';
32
}
33
});
34
}
35
36
37
38
getPrivateGroup() {
39
console.log('user check', this.user);
40
this.groupService.getPrivateGroup(`${this.user.first_name}${this.user.last_name}`)
41
.subscribe((group) => {
42
console.log('received response', group)
43
})
44
}
45
46
// !--LOAD ALL THE GROUP POSTS ON INIT--! //
47
loadGroupPosts() {
48
this.isLoading$.next(true);
49
50
this.postService.getGroupPosts(this.group_id)
51
.subscribe((res) => {
52
// console.log('Group posts:', res);
53
this.posts = res['posts'];
54
console.log('Group posts:', this.posts);
55
this.isLoading$.next(false);
56
this.show_new_posts_badge = 0;
57
}, (err) => {
58
swal("Error!", "Error while retrieving the posts " + err, "danger");
59
});
60
}
61
// !--LOAD ALL THE GROUP POSTS ON INIT--! //
62
Advertisement
Answer
You can use basic promises with async/await
.
JavaScript
1
36
36
1
async ngOnInit() {
2
3
await this.getUserProfile(); // <-- 1. change
4
5
// my-workplace depends on a private group and we need to fetch that group and edit
6
// the group data before we proceed and get the group post
7
if (this.isItMyWorkplace) {
8
this.getPrivateGroup();
9
}
10
this.loadGroupPosts();
11
}
12
13
async getUserProfile() {
14
this._userService.getUser()
15
.subscribe((res) => {
16
this.user = res.user;
17
console.log('log user', this.user);
18
this.profileImage = res.user['profile_pic'];
19
this.profileImage = this.BASE_URL + `/uploads/${this.profileImage}`;
20
return true; // <-- this
21
}, (err) => {
22
this.alert.class = 'alert alert-danger';
23
if (err.status === 401) {
24
this.alert.message = err.error.message;
25
setTimeout(() => {
26
localStorage.clear();
27
this._router.navigate(['']);
28
}, 3000);
29
} else if (err.status) {
30
this.alert.class = err.error.message;
31
} else {
32
this.alert.message = 'Error! either server is down or no internet connection';
33
}
34
throw err;
35
});
36
}