Angular Http 模块

最新推荐文章于 2025-05-15 12:59:56 发布

转载最新推荐文章于 2025-05-15 12:59:56 发布 · 2k 阅读

文章标签：

#angular http #angular #angular ui

angular 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Angular中HttpClient的基本使用方法，包括导入Http模块、使用Http服务的步骤及示例，展示了如何通过Angular获取GitHub组织成员信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自 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 {}