Question

我设法在express.js服务器和Angular应用程序之间建立了连接（Angular APP也由express服务器托管）。

我已经创建了一个组件（目前不执行任何操作），但是我的目标是调用一个服务方法（该服务方法执行http get请求以从服务器获取JSON字符串），以及该方法何时接收到JSON字符串成功我想在组件中使用它。

我的服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DbConnectorService {
  private baseUrl:string = "http://localhost:3000"
  constructor(private http: Http) { }
  getAllData() {
    this.http.get(this.baseUrl + '/api/getData').subscribe((res) => {
      console.log(res.text());
    }); 
  }
}

执行HTTP请求并获取JSON现在可以正常工作（JSON在res.text()内部），但是如何从组件中调用该方法，并说当它成功接收到JSON字符串时将其打印出来呢？

Answer 1

getAllData() {
  return this.http.get(...)
  .pipe(tap(res => console.log(res))); // if you want to log it immediately
}

将DbConnectionService注入组件

和组件

dbConnectionService.getAllData().subscribe(// do sth with response);

您还可以指定Observable的通用类型

getAllData(): Observable<TypeOfData> {
  return this.http.get<TypeOfData>(...);
}

Answer 2

get方法返回一个Observable，它是只能由subscribe()函数激活和解包的数据流（您可以认为observable是包含数据的管道，而{ {1}}功能是一个阀门，它激活管道，因此数据从管道中流出。

因此您可以在服务中定义方法

subscribe()

然后将其注入并订阅到您的组件中

getAllData() : Observable<any> {
  return this.http.get(...);
}

Angular HTTP服务，在请求完成后执行一些操作

2 个答案: