没有 Rxjs 的订阅方法答案

【问题标题】：Subscribe method without Rxjs没有 Rxjs 的订阅方法
【发布时间】：2018-07-21 15:51:03
【问题描述】：

我是 Angular 5 的新手，我已经完成了以下登录用户的方法。以下是我的功能。但我对 observable 感到困惑，因为所有文章都在说 subscribe 方法与 observable 和 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);

【问题讨论】：

标签： angular rxjs

【解决方案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 使用 observables 作为接口来处理各种常见的异步操作。

例如：

EventEmitter 类扩展了 Observable。

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

Router 和 Forms 模块使用 observables 来监听和响应用户输入事件。

因此在这些情况下，您无需直接使用他们的库来使用Rxjs

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

From Angular DOC

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

例如构造一个 POST 请求，将 body 解释为 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

也可以参考这些链接

希望对您有所帮助！

【讨论】：

我能够从服务器获取令牌，但我可以看到两次响应，即 200 好的。它显示了两次。这是否意味着代码执行了 2 次？实际上我只点击了一次按钮。
确保在组件销毁时取消订阅this.restProvider.loginToken。例如首先声明一个subscription: ISubscription; 变量并分配subscription = this.restProvider.loginToken(this.registerCredentials).subscribe... 并在您的组件和ngOnDestroy() 内部实现OnDestroy 像这样使用this.subscription.unsubscribe();

【解决方案2】：

Observable 是一种模式，而 rxjs 是一个实现 observable 模式的库。

rxjs 是 angular core 的构建基础之一，许多 angular api 返回 observable，为什么要订阅？ observable 是惰性的，它与Promise 不同，例如HttpClient 请求将在您使用订阅时发出。

你可以在angular doc - observable阅读更多相关信息

【讨论】：