Angular Http 模块

转载自 http://www.ngui.cc/news/show-107.html

Angular 4.3 版本后，推荐使用 HttpClient，可以参考 Angular HTTP Client 快速入门   // 此处需修改

基础知识

导入 Http 模块

// ...  

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

 @NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
}) 

export class AppModule { }

使用 Http 服务步骤

(1) 从 @angular/http 模块中导入 Http 类

(2) 导入 RxJS 中的 map 操作符

(3) 使用 DI 方式注入 http 服务

(4) 调用 http 服务的 get() 方法，设置请求地址并发送 HTTP 请求

(5) 调用 Response 对象的 json() 方法，把响应体转成 JSON 对象

(6) 把请求的结果，赋值给对应的属性

Http 服务使用示例

使用 Http 服务

import { Component, OnInit } from '@angular/core'; 

import { Http } from '@angular/http'; // (1)

import 'rxjs/add/operator/map'; // (2) 

interface Member {
    id: string;
    login: string;
    avatar_url: string;
} 

@Component({
    selector: 'sl-members',
    template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID：<span>{{member.id}}</span>
          Name: <span>{{member.login}}</span>
        </p>
      </li>
    </ul>
    ` }) 

export class MembersComponent implements OnInit {
  members: Member[];  

 constructor(private http: Http) { } // (3) 

  ngOnInit() {  

 this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4) 

   .map(res => res.json()) // (5) 

   .subscribe(data => { if (data) this.members = data; // (6) });

    }
}

声明 MembersComponent 组件

// ... 

import { MembersComponent } from './members.component'; 

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
}) 

export class AppModule { }

使用 MembersComponent 组件

import { Component } from '@angular/core'; 

@Component({
  selector: 'my-app',
  template: `
    <sl-members></sl-members>
  `,
}) 

export class AppComponent {}