在angular 12中，我需要调用一个将给出令牌的api，然后我需要将该令牌传递给另一个api来调用，但我的代码不起作

Question

下面是我的代码，它有两个方法getToken和validateuser，我是从getToken中获取令牌，并将其传递给validateuser的参数。但在获得令牌之前，我的第二个api调用正在执行。

ngOnInit(): void {
this.login()
}
getToken(){
const authParam = {
username: "abc",
password: "abc"
};
this.apiService.getToken(authParam)
.subscribe(
response => {
console.log("here1");
this.token = response;  
console.log(this.token);
},
error => {
console.log(error);
});
}
vlidateUser(){
this.getToken();
const loginParam ={
userId:"abc",
serviceType:"UV",
auth_token:this.token
}
this.apiService.validateUser(loginParam)
.subscribe(
response => {
console.log("here2");
console.log(response);
},
error => {
console.log(error);
});
}
login(){
this.vlidateUser();
}

}

Answer 1

• 在vlidateUser((之前使用async
• 在this.getToken((之前使用wait

ngOnInit(): void {
this.login()
}
getToken(){
const authParam = {
username: "abc",
password: "abc"
};
this.apiService.getToken(authParam)
.subscribe(
response => {
console.log("here1");
this.token = response;  
console.log(this.token);
},
error => {
console.log(error);
});
}
async vlidateUser(){
await this.getToken();
const loginParam ={
userId:"abc",
serviceType:"UV",
auth_token:this.token
}
this.apiService.validateUser(loginParam)
.subscribe(
response => {
console.log("here2");
console.log(response);
},
error => {
console.log(error);
});
}
login(){
this.vlidateUser();
}

}

Answer 2

使用异步等待

ngOnInit(): void {
this.login()
}
getToken(){
const authParam = {
username: "abc",
password: "abc"
};
this.apiService.getToken(authParam)
.subscribe(
response => {
console.log("here1");
this.token = response;  
console.log(this.token);
},
error => {
console.log(error);
});
}
async vlidateUser(){
await this.getToken();
const loginParam ={
userId:"abc",
serviceType:"UV",
auth_token:this.token
}
this.apiService.validateUser(loginParam)
.subscribe(
response => {
console.log("here2");
console.log(response);
},
error => {
console.log(error);
});
}
login(){
this.vlidateUser();
}

}

Answer 3

解决这个问题的更好方法是使用mergeMap、switchMap运算符，而不是使用async。

switchMap允许您在下一个可观察(validateUser((API(中使用一个可观测的响应(在您的情况下为getToken((API(

login() {
const authParam = {
username: 'abc',
password: 'abc',
};
this.apiService
.getToken(authParam)
.pipe(
switchMap(response => {
const token = response;
const loginParam = {
userId: 'abc',
serviceType: 'UV',
auth_token: token,
};
return this.apiService.validateUser(loginParam);
})
)
.subscribe(
(resp) => {
console.log('here2');
console.log(resp);
},
error => {
console.log(error);
}
);
}

只有在getToken返回值后，validateUser API才会运行。我已经使用switchMap来使用最新的getToken值(如果有多个API调用(