开发学院

您的位置:首页>教程>正文

教程正文

Angular 4 Http服务

Angular 4  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,同样的代码也添加到了导入数组中。

  现在让我们用在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方法有助于将数据转换为JSON格式,要使用Map,我们需要先导入,如下:

import 'rxjs/add/operator/map';

  map工作完成后,订阅者将在控制台中记录输出,如浏览器所示:

console_output_of_map.jpg

  正如您看到,JSON对象会显示在控制台中。这些对象也可以在浏览器中显示。

  对于要在浏览器中显示的对象,请按如下方式更新app.component.html和app.component.ts的代码

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) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

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

  在显示数据方法中,我们将数据存储在变量httpdata中。在浏览器中使用httpdata变量显示数据,这是在app.component.html文件中完成的。

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>
The json object is as follows −

{
   "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 等属性。以及与phone, website以及company等其他细节。使用for循环,我们将在浏览器中显示名称和城市详细信息,如app.component.html文件所示。

  这就是浏览器中显示的方式:

using_for_loop_name_city_details.jpg

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

  以下是在app.component.html和app.component.ts文件中所做的更改:

app.component.ts

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 {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

  对于get API,我们将添加搜索参数id = this . searcheparam。searcheparam等于2。我们需要JSON数据中id = 2的详细信息。

app.component.html

{{name}}

  以下是浏览器的显示:

ervin_howell.jpg

  我们已经在浏览器中显示了id=2的数据,这些数据是从http接收的,同时控制台中也会显示相同内容。