CODEWITHSUNDEEP
angularrxjs
atc
atc

Reputation: 621

Subscribe method without Rxjs

I am new to Angular 5 and I have done following methods for login a user. Following are my functions. But I am confused with observable because all articles are saying subscribe method with observable with Rx.

Is there any wrong in my method implementation. I haven't used Rxjs library.

My 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;
    });
  }

My Rest.ts

import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

  apiUrl='http://localhost:26264'
  constructor(public http: HttpClient) {
    console.log('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.log(details);
  return this.http.post(this.apiUrl + '/token', details, options);

Upvotes: 3

Views: 1264

Answers (2)

coder
coder

Reputation: 8702

You have used HttpClient if you look into this class you could see it returns an Observable<any> type this mean this feature is builtin feature with 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>
}

From Angular DOC

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.

Therefor in these cases you no need to use Rxjs directly using the their library

You have used this.http.post(this.apiUrl + '/token', details, options); this is also return Observable

From Angular DOC

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

Also refer these links

Hope this will help you!

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

Observable is a pattern and rxjs a library that implement the observable pattern.

rxjs is one of building base of angular core , many of angular api return observable, why to subscribe ? observable is lazy that is one diffrent between Promise,for example HttpClient request will be made when you use subscribe.

you can read more about this in angular doc - observable

Upvotes: 1

Related Questions