[英]Angular - subscribe to http service callback
I'm struggling to understand this.. 我正在努力了解这一点。
In my requests.service
I have this function that calls my backend: 在我的
requests.service
我有一个调用后端的函数:
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. 这有效,
data
被返回。
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: 现在,在
login.page.ts
我想调用loginUser
但是我也要在其上进行回调,以便知道何时成功运行它,所以我可以这样做:
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
this.req.loginUser(...)。则不是函数
If I just console.log
it with no callback it works fine, but I need to know when the call has been successful. 如果我只是在没有回调的情况下进行
console.log
那么它可以正常工作,但是我需要知道调用何时成功。
Any ideas? 有任何想法吗?
It's an observable coming back not a promise. 这是可观察的回来而不是诺言。 So
.then
is not applicable. 因此
.then
不适用。
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()能够对订阅执行更多操作,例如:
.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. 由于
loginUser
返回一个Observable
,因此您需要subscribe
它。
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
,以防您想使用可观察的对象,而无需在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 如果您要使用then方法并且要平时调用该方法,请使用toPromise方法将observable转换为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 现在您可以使用then方法
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 🔥🔥两种方法之间的主要区别(如果可以观察到此👉this.req.login
this.req.login User(info.email, info.password)
在您订阅之前不会运行,但是在答应此this.req.login User(info.email, info.password)
即使不使用也会运行该方法,然后请求将发送到服务器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.