浅谈Angular HttpClient简单入门


Posted in Javascript onMay 04, 2018

现代浏览器支持使用两种不同的 API 发起 HTTP 请求:XMLHttpRequest 接口和 fetch() API。

@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。

一、准备工作

首先在app.module.ts 导入 HttpClientModule。如下:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
 imports: [
  HttpClientModule,
 ]
})
export class AppModule {}

浅谈Angular HttpClient简单入门

二、在需要引用HttpClient的service.ts中引入HttpClient,如下:

import { HttpClient } from '@angular/common/http';
export class ConfigService {
 constructor(private http: HttpClient) { }
}

浅谈Angular HttpClient简单入门

三、请求数据

return this.http.get/post(url:'请求地址' ,
  options: {
   headers: this.headers
  })
   .toPromise()
   .then((data: any) => {
    return data;
   })
   .catch((err) => {
    console.log(err);
   });
 }

浅谈Angular HttpClient简单入门

四、在对应的component.ts文件中引入service

浅谈Angular HttpClient简单入门

数据格式:

{
  "lists":[
    {"title":"","pic":""},
    {"title":"","pic":""}
  ]
}

五、页面上调用

浅谈Angular HttpClient简单入门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
Vue项目全局配置微信分享思路详解
May 04 #Javascript
vue嵌套路由与404重定向实现方法分析
May 04 #Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 #Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
node实现的爬虫功能示例
May 04 #Javascript
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
JavaScript实现百度搜索框效果
Mar 26 #Javascript
You might like
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php数组查找函数总结
2014/11/18 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
Python获取当前时间的方法
2014/01/14 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python中while和for的区别总结
2019/06/28 Python
django认证系统 Authentication使用详解
2019/07/22 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
结婚典礼证婚词
2014/01/11 职场文书
小学毕业家长寄语
2014/01/19 职场文书
毕业自我评价
2014/02/05 职场文书
优秀教师工作感言
2014/02/16 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers