启用 Http 服务

  • open the root AppModule,
  • import the HttpClientModule symbol from @angular/common/http,
  • add it to the @NgModule.imports array.
// app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'; // Import HttpClientModule from @angular/common/http
import {HttpClientModule} from '@angular/common/http'; @NgModule({
imports: [
BrowserModule,
// Include it under 'imports' in your application module
// after BrowserModule.
HttpClientModule,
],
})
export class MyAppModule {}

发起一个 get 请求

@Component(...)
export class MyComponent implements OnInit { results: string[]; // Inject HttpClient into your component or service.
constructor(private http: HttpClient) {} ngOnInit(): void {
// Make the HTTP request:
this.http.get('/api/items').subscribe(data => {
// Read the result field from the JSON response.
this.results = data['results'];
});
}
}

Reading the full response

this.http
.get('https://jsonplaceholder.typicode.com/posts/1', {observe: 'response'})
.subscribe(res => {
console.log(res)
})

错误处理

http
.get('/api/items')
.subscribe(
// Successful responses call the first callback.
data => {...},
// Errors will call this callback instead:
err => {
console.log('Something went wrong!');
}
);

ng-http的更多相关文章

  1. 【码在江湖】前端少侠的json故事(中)ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  2. 不知道张(zhāng)雱(pāng)是谁?你out了!

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  3. Flume NG Getting Started(Flume NG 新手入门指南)

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  4. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  5. 汇编语言标志位 含义 NV UP EI NG NZ AC PE CY

    缩写原意: Overflow of = OV NV [No Overflow] Direction df = DN (decrement) UP (increment) Interrupt if = ...

  6. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  7. 第一次部署Struts2时出现错误java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.class

    报如下错误 at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1720) at org. ...

  8. 汇编语言标记寄存器标记位_NV UP EI NG NZ AC PE CY

    在8086CPU中,有一种标记寄存器,长度为16bit: 其中存储的信息被称为程序状态字(Program Status Word,PSW),以下将该寄存器简称为flag. 功能:1)用来存储相关指令的 ...

  9. 高可用Hadoop平台-Flume NG实战图解篇

    1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...

  10. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

随机推荐

  1. An enhance script to check partition tables under all schemas in sqlserver

    Simple step for EMC NW & NMM (1) disable WINDOWS UAC (reboot)(2) SET windows domain user AS sysa ...

  2. 题解 NOI2004【郁闷的出纳员】

    \[ Preface \] 之前用 treap 打,交了四遍才过. 自学了 fhq treap 后,才意识到是一道 fhq treap 板子题,直接码上,一遍就过. 本题解提供的是 fhq treap ...

  3. urllib 模块 - module urllib

    urllib 模块 - urllib module 获取 web 页面, html = urllib.request.urlopen("http://www.zzyzz.top/" ...

  4. CentOS7 Cloudera Manager6 完全离线安装 CDH6 集群

    本文是在CentOS7.4 下进行CDH6集群的完全离线部署.CDH5集群与CDH6集群的部署区别比较大. 说明:本文内容所有操作都是在root用户下进行的. 文件下载 首先一些安装CDH6集群的必须 ...

  5. Python3 (一) 基本类型

    前言: 什么是代码? 代码是现实世界事物在计算机世界中的映射. 什么事写代码? 写代码是将现实世界中的事物用计算机语言来描述. 一.数字:整形与浮点型 整型:int 浮点型:float (没有单精度和 ...

  6. ceph集群部署

    最近在学习 kubernetes 过程中,想实现 pod 数据的持久化.在调研的过程中,发现 ceph 在最近几年发展火热,也有很多案例落地企业.在选型方面,个人更加倾向于社区火热的项目,Gluste ...

  7. 珠峰-6-koa-express

    ####  这里写await和return 的区别是, await后边还可以写代码,而return 不会. ##### koa这里需要注意 这样子方法1比起方法2,少写n个url类似这样的key.

  8. 【5min+】后台任务的积木。.NetCore中的IHostedService

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  9. PHPExcel使用

       参考链接: 官方github:https://github.com/PHPOffice/PHPExcel 设置表格字体颜色等操作:http://www.cnblogs.com/grimm/p/9 ...

  10. Django 表关系的创建

    Django 表关系的创建 我们知道,表关系分为一对多,多对多,一对一 我们以一个图书管理系统为背景,设计了下述四张表,让我们来找一找它们之间的关系 Book与Publish表 找关系:一对多 左表( ...