Question

我是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.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

Observable是一种模式，rxjs是一个实现可观察模式的库。

rxjs 是角核的构建基础之一，可以观察到许多角api返回，为什么要订阅？可观察到的是懒惰的，这是Promise之间的区别，例如，使用订阅时将发出HttpClient请求。

您可以在angular doc - observable

中了解更多信息

Answer 2

如果您使用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利用可观察对象作为处理各种变化的接口   常见的异步操作。

例如：


EventEmitter类扩展了Observable。

HTTP模块使用可观察对象来处理AJAX请求和响应。

Router和Forms模块使用可观察对象侦听并响应用户输入的事件。

因此，在这种情况下，您无需直接使用其库中的Rxjs

您使用过this.http.post(this.apiUrl + '/token', details, options);，这也是返回Observable

From Angular DOC

构造一个Observable，当订阅时，它将导致   在服务器上执行的已配置POST请求。见   个别重载，基于post（）返回类型的详细信息   提供的选项。

例如   构造一个POST请求，该请求将主体解释为ArrayBuffer并返回它。
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>
查看更多here

也请参考这些链接

希望这对您有帮助！

不使用Rxjs的订阅方法

2 个答案: