启用 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. JAVA编程学习之JAVA集合

    一.JAVA集合类 为了保存数量不确定的数据,以及保存具有映射关系的数据(关联数组),java提供了集合类.所有集合类位于java.util包下. 集合类就像容是器,现实生活中容器的功能,无非就是添加 ...

  2. cookie 笔记

    Cookie    “小甜点” Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生 用来记录:用户信息  计算机信息  浏 ...

  3. php 页面分页样式 示例

    <?php class SubPages { private $each_disNums; //每页显示的条目数 private $nums; //总条目数 private $current_p ...

  4. 达梦数据库-RAC-DMDSC部署的关键点

    达梦数据库-RAC-DMDSC部署的关键点 环境准备 网络准备(ip地址分配).共享磁盘准备和挂载 ifconfig enp0s8 10.1.2.101;ifconfig enp0s9 192.168 ...

  5. java sql语句 like%?%报错的问题

    在数据库中不会报错,但用java调用时确保错. SQL语句: SELECT pageId,`name`,text FROM Page WHERE `name` LIKE CONCAT('%',?,'% ...

  6. PYTHON 学习笔记3 元组、集合、字典

    前言 在上一节的学习中.学习了基本的流程控制语句,if-elif-else for while 等,本节将拓展上一节学习过的一些List 列表当中操作的一些基本方法,以及元祖.序列等. 列表扩展 我们 ...

  7. web渗透步骤流程

    2013-11-13 23:03 (分类:网络安全) 这篇流程写的非常细,思路上很完整很全面,非常值得参考,做渗透思路要非常清晰,要不然我感觉真的容易乱,或者漏掉一些可能存在的点. 1.渗透目标 渗透 ...

  8. 杭电-------2041超级楼梯(c语言写)

    /* 当未走的楼梯大于1时,可以选择走一步或者走两步,每次所做的选择相似, 符合分治法的特性,因此选择分治法,又测试用例有多组,为了避免多组 用例的重复计算,可用一个数组将已经知道的剩下的楼梯可以走的 ...

  9. Day6前端学习之路——布局

    一.定位 1)静态定位  position:static(默认) 2)相对定位 position:relative(要配合top.bottom.left.right等属性来使用) 3)绝对定位 pos ...

  10. Webpack之魔法注释/* webpackChunkName:"lodash" */的做用

    之前在vue的路由配置文件中看到了/* webpackChunkName:"lodash" */这个注释, 在学习了webpack之后了解其做用,作用就是webpack在打包的时候 ...