Angular 4.3 HttpClient (Angular访问 REST Web 服务) 一、Http

链接
开发工具：Visual Studio Code

在Angular 4.3中引入了新的HttpClientModule。 这个新模块可以在@ angular / common / http包中找到，并且可以完全重新实现前一个HttpModule。新的HttpClient服务包含在HttpClientModule中，可用于启动HTTP请求并处理应用程序中的响应。

安装 4.3 项目

开始Angular 4.3项目第一步。最简单的是用Angular CLI (Angular command line interface).

1. 如果系统还没有安装过Angular CLI ，先要执行下面的命令安装最新版（-g：全局安装）：
   npm install -g @angular/cli@latest

   如果有安装cnpm，可用cnpm，下载速度更快
   cnpm install -g @angular/cli@latest

2. 新建一个文件夹ng_http，用来存放项目。命令行切换到此目录，然后用VS Code打开。
   cd D:AngularNG_App
code .
3. 接着，就可以使用 ng命令了开始一个新的Angular 项目了:
   ng new nghttp01
   如果报错，并在错误日志记录总显示
   integrity checksum failed when using sha512
   npm4升级npm5，在运行 npm install 时，可能会包这样的错误，执行
   npm cache clean --force
   删除项目文件夹，重新执行。
   ng new nghttp01
   执行成功后会产生 nghttp01文件夹与项目模板，依赖性也会自动安装。
4. 检查并确认 package.json 中Angular相关所有依赖版本 号 >4.3.0。
   
5. package.json 文件做过更新后，命令行中切换到nghttp01下，执行下面命令更新
   npm install

在项目中启用 HttpClient

1。为了在项目components 中使用 HttpClient 服务，第一步就是要在Angular应用中把 HttpClientModule 包含进来。首先在应用根module中导入 HttpClient module，对应文件app.module.ts。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';//新增行
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,HttpClientModule //新增行
  ],providers: [],bootstrap: [AppComponent]
})

2。上一步在根 Module 导入了HttpClientModule ，就可以在components中使用HttpClient了。使用HttpClient第一步是导入（import），还必须要注入(inject )到component class的构造函数中。如下所示：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';//新增行
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private http: HttpClient){//新增行，httpclient注入到构造函数中，以使HttpClient可用。
  }
}

3。HttpClient使用XMLHttpRequest浏览器API来执行HTTP请求。 为了执行特定类型的HTTP请求，可以使用以下与HTTP动词相对应的方法：
**get
post
put
delete
patch
head
jsonp**

使用HttpClient 请求数据

1。 简单示例：使用 GitHub’s REST API 请求用户数据。修改app.component.ts代码(完整):

import { Component,OnInit } from '@angular/core';//新增导入OnInit
import { HttpClient } from '@angular/common/http';//新增行
@Component({
  selector: 'app-root',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {//新增implements OnInit
  title = 'app';
  results = '';
  constructor(private http: HttpClient){///新增行，httpclient注入到构造函数中，以使HttpClient可用。
  }
  //新增ngOnInit()方法
  ngOnInit(): void {    this.http.get('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.log(data);
    });
  }
}

2。项目启动：VS Code命令行执行。网页访问http://localhost:4200/
ng serve

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!