Angular 6 - Http 服务

---

---

Http 服务将帮助我们获取外部数据，向其发布数据等。我们需要导入 http 模块才能使用 http 服务。让我们考虑一个示例来了解如何使用 http 服务。

要开始使用 http 服务，我们需要在app.module.ts中导入模块，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

如果您看到突出显示的代码，我们已从@angular/http导入 HttpModule，并且它也添加到 imports 数组中。

现在让我们在app.component.ts中使用 http 服务。

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

让我们理解上面突出显示的代码。我们需要导入 http 以使用该服务，方法如下：

import { Http } from '@angular/http';

在类AppComponent中，创建一个构造函数，并创建类型为 Http 的私有变量 http。要获取数据，我们需要使用 http 提供的get API，如下所示

this.http.get();

它将要获取的 url 作为参数，如代码所示。

我们将使用测试 url - https://jsonplaceholder.typicode.com/users 来获取 json 数据。在获取的 url 数据上执行了两个操作：map 和 subscribe。Map 方法有助于将数据转换为 json 格式。要使用 map，我们需要导入它，如下所示：

import {map} from 'rxjs/operators';

完成 map 后，subscribe 将在控制台中记录输出，如浏览器中所示：

如果您看到，json 对象显示在控制台中。这些对象也可以显示在浏览器中。

为了在浏览器中显示对象，请按如下方式更新app.component.html和app.component.ts中的代码：

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

在app.component.ts中，使用 subscribe 方法，我们将调用 displayData 方法并将获取的数据作为参数传递给它。

在 displayData 方法中，我们将数据存储在一个名为 httpdata 的变量中。使用for循环遍历此 httpdata 变量在浏览器中显示数据，这在app.component.html文件中完成。

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

json 对象如下所示：

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "Sincere@april.biz",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

该对象具有 id、name、username、email 和 address 等属性，address 内部包含 street、city 等以及与电话、网站和公司相关的其他详细信息。使用for循环，我们将在浏览器中显示 name 和 city 的详细信息，如app.component.html文件所示。

浏览器中显示的效果如下：

现在让我们添加搜索参数，它将根据特定数据进行过滤。我们需要根据传递的搜索参数获取数据。

以下是app.component.html和app.component.ts文件中的更改：

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

对于get api，我们将添加搜索参数 id = this.searchparam。searchparam 等于 2。我们需要 json 文件中id = 2的详细信息。

浏览器显示的效果如下：

我们在浏览器中输出了从 http 接收到的数据。它也显示在浏览器控制台中。浏览器中显示了 json 中id = 2的名称。