如何在Angular中使用HTTP和Observables检索数据？

大多数应用程序从后端服务器获取数据。他们需要发出HTTP GET请求。在本文中，我们将研究发出HTTP请求并将结果/响应映射到本地数组中。此数组可用于根据需要显示或过滤项目。这里最重要的是使用Observable。让我们先快速了解一下Observable。
可观察性很重要，因为它有助于管理异步数据(例如来自后端服务器的数据)。因此，我们可以将Observable视为一个数组，其中项随时间异步到达。使用Observable，我们需要在代码中使用一个方法来订阅此Observable。 Angular本身使用Observable，包括angular事件和angular HTTP客户端服务，这就是我们在此介绍observable的原因。
重要步骤如下：

1. 使用以下命令创建服务：ng gs album。在这里，我们将创建一个类AlbumService。
2. 在AlbumService类中，创建一个名为getAllAlbums()的方法，该方法将使用Observable发出HTTP GET请求。
3. 将此服务注入到要使用这些方法的任何组件的构造函数中。例如-AlbumListComponent。
4. 在AlbumListComponent类中创建一个方法或使用角度生命周期挂钩，该方法将订阅可观察对象，然后收获所接收的响应。

创建服务： album.service.ts

javascript

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { IAlbum } from '../model/album';
 
@Injectable({
  providedIn: 'root'
})
export class AlbumService {
  albums_url: string =
"https://jsonplaceholder.typicode.com/albums";
  constructor(private _http: HttpClient) {}
}

javascript

import { Component, OnInit } from '@angular/core';import { IAlbum } from '../model/album';import { AlbumService } from '../service/album.service'; @Component({  selector: 'album-list',  templateUrl: './album-list.component.html',  styleUrls: ['album-list.component.css']})export class AlbumListComponent implements OnInit {  albums: IAlbum[] =[];  constructor(private _albumService: AlbumService) { }  ngOnInit() {    this._albumService.getAllAlbums().subscribe({      next: albums =>{        this.albums=albums      }    })  }}

html

  Albums list!
 
  
     
Uploaded by User no. : {{album.id}}
      
Album name: {{album.title}}
        

将URL存储在变量album_url中。现在我们需要HttpClient服务来对该URL发出HTTP GET请求，因此我们必须将其注入到构造函数中。确保从相应模块文件中的@ angular / common / http导入HttpClientModule。

javascript

@NgModule({
  imports: [ BrowserModule,
       FormsModule, HttpClientModule ],
  declarations: [ ... ],
  providers: [ AlbumService ],
  bootstrap:    [ ...]
})
export class AppModule { }

现在创建一个方法getAllAlbums() ：

javascript

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { IAlbum } from '../model/album';
 
@Injectable({
  providedIn: 'root'
})
export class AlbumService {
  albums_url: string =
"https://jsonplaceholder.typicode.com/albums";
  constructor(private _http: HttpClient) {}
  getAllAlbums(): Observable {
    return this._http.get(this.albums_url)
      .pipe(
        tap(data =>
        console.log('All: ' + JSON.stringify(data)))
      );
  }
}

注意，这里Observable的数据类型是IAlbum list，get方法的返回类型也是IAlbum list。 IAlbum是一个接口。