Метод подписки без Rxjs
Я новичок в Angular 5, и я использовал следующие методы для входа в систему. Ниже приведены мои функции. Но меня смущает наблюдаемый, потому что во всех статьях говорится о методе подписки с наблюдаемым с помощью Rx.
Что-то не так в моей реализации метода. Я не использовал библиотеку Rxjs.
Мой login.ts
import { Component } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { RestProvider } from '../../providers/rest/rest';
login(data) {
this.restProvider.loginToken(this.registerCredentials).subscribe((data : any)=>{
localStorage.setItem('userToken',data.access_token);
},
(err : HttpErrorResponse)=>{
this.isLoginError = true;
});
}
Мой Rest.ts
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
apiUrl='http://localhost:26264'
constructor(public http: HttpClient) {
console.info('Hello RestProvider Provider');
}
loginToken(data){
var details = this.jsonToURLEncoded({ grant_type:'password', username:data.email, password:data.password,});
var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
const options = {
headers: reqHeader
}
console.info(details);
return this.http.post(this.apiUrl + '/token', details, options);
Ответы 2
Observable - это шаблон, а rxjs - библиотека, реализующая наблюдаемый шаблон.
rxjs - это одна из основ построения углового ядра, многие из угловых API-интерфейсов наблюдаются,
зачем подписываться? observable является ленивым, что является одним из отличий между Promise, например, запрос HttpClient будет сделан, когда вы используете подписку.
вы можете прочитать об этом в угловой документ - наблюдаемый
Вы использовали HttpClient, если вы посмотрите на этот класс, вы увидите, что он возвращает тип Observable<any>, это означает, что эта функция встроена в функцию HttpClient.
class HttpClient {
request(first: string | HttpRequest<any>, url?: string, options: {...}): Observable<any>
delete(url: string, options: {...}): Observable<any>
get(url: string, options: {...}): Observable<any>
head(url: string, options: {...}): Observable<any>
jsonp<T>(url: string, callbackParam: string): Observable<T>
options(url: string, options: {...}): Observable<any>
patch(url: string, body: any | null, options: {...}): Observable<any>
post(url: string, body: any | null, options: {...}): Observable<any>
put(url: string, body: any | null, options: {...}): Observable<any>
}
Angular makes use of observables as an interface to handle a variety of common asynchronous operations.
For example:
- The EventEmitter class extends Observable.
- The HTTP module uses observables to handle AJAX requests and responses.
- The Router and Forms modules use observables to listen for and respond to user-input events.
Поэтому в этих случаях вам не нужно использовать Rxjs напрямую, используя их библиотеку.
Вы использовали this.http.post(this.apiUrl + '/token', details, options);, это тоже возврат Observable
Constructs an Observable which, when subscribed, will cause the configured POST request to be executed on the server. See the individual overloads for details of post()'s return type based on the provided options.
Eg. Construct a POST request which interprets the body as an ArrayBuffer and returns it.
post(url: string, body: any | null, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: 'body'; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: 'arraybuffer'; withCredentials?: boolean; }): Observable<ArrayBuffer>See more here
Также обратитесь по этим ссылкам
Надеюсь, что это поможет вам!
не забудьте отказаться от подписки на this.restProvider.loginToken при уничтожении компонента. например сначала объявите переменную subscription: ISubscription; и назначьте subscription = this.restProvider.loginToken(this.registerCredentials).subscribe... и реализуйте OnDestroy на вашем компоненте, а внутри ngOnDestroy() используйте как этот this.subscription.unsubscribe();
Я могу получить токен с сервера, но я вижу ответ два раза, т.е. 200 Ok. Показывает два раза. Значит ли это, что код выполняется 2 раза? На самом деле я нажал кнопку только один раз.