angular - 没有 Rxjs 的订阅方法

Question

我是 Angular 5 的新手，我已经完成了以下登录用户的方法。以下是我的功能。但我对 observable 感到困惑，因为所有文章都在说使用 Rx 的 observable 订阅方法。

是不是我的方法实现有问题。我没有使用过 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.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);

Answer 1

您已经使用了 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>
}

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.

因此在这些情况下你不需要使用 Rxjs直接使用他们的库

您已经使用了this.http.post(this.apiUrl + '/token', details, options);这也是返回 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

另请参阅这些链接

• Observables
• The RxJS library

希望对您有所帮助!