I'm struggling to understand this..
In my requests.service
I have this function that calls my backend:
loginUser(username, pw): Observable <any>{
const body = {
username: username,
password: pw
}
let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa('test:test'));
headers = headers.append("Content-Type", "application/json");
return this.http.post('https://website.com/1/user/login', body, {headers: headers})
.subscribe((data)=>{ //use methods in our service
console.log(data)
this.userData = data;
}, (err)=> console.log(err));
}
This works, the data
is returned.
Now, in login.page.ts
I want to call loginUser
but I also want a callback on it so I know when it has successfully been run, so I do:
this.req.loginUser(info.email, info.password).then((data) => {
console.log(data)
})
but I get the error:
this.req.loginUser(...).then is not a function
If I just console.log
it with no callback it works fine, but I need to know when the call has been successful.
Any ideas?
It's an observable coming back not a promise. So .then
is not applicable.
this.req.loginUser(info.email, info.password).pipe().subscribe((data) => {
console.log(data) // whenever data returns do something with it
})
We use pipe() to be able to do more things with subscriptions such as:
.pipe(
take(1) // will allow the subscription to return 1 time then unsubscribe
takeUntil() // subscribe until a condition is met
map() // map your observable
etc.
)
Since loginUser
returns an Observable
, you need to subscribe
to it.
this.req.loginUser(info.email, info.password).subscribe((data) => {
console.log(data)
})
you need to update the loginUser
like this in case you want to use the observable and you don't need to subscribe inside the loginUser
loginUser(username, pw): Observable <any>{
const body = {
username: username,
password: pw
}
let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa('test:test'));
headers = headers.append("Content-Type", "application/json");
const url = 'https://website.com/1/user/login';
return this.http.post(url, body, {headers: headers}); // 👈
}
invoke the method like this 👇
this.req.loginUser(info.email, info.password).subscribe((data)=>{
console.log(data);
this.userData = data;
}, (err)=>{
console.log(err)
});
in case you want to use the then method and you want to invoke the method imidaily use toPromise method to convert the observable to promise
loginUser(username, pw): Promise <any>{
const body = {
username: username,
password: pw
}
let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa('test:test'));
headers = headers.append("Content-Type", "application/json");
const url = 'https://website.com/1/user/login';
return this.http.post(url, body, {headers: headers}).toPromise(); // 👈
}
now you can use the then method
this.req.loginUser(info.email, info.password).then((data)=>{
console.log(data);
this.userData = data;
}).
catch( err => console.log(err));
💣💥
The key difference between two ways if it observable this 👉
this.req.login User(info.email, info.password)
will not run until you subscribe but in case of promise this 👉this.req.login User(info.email, info.password)
will run the method even without using then the request will send to the server 🔥🔥
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.