浅谈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 相关文章推荐
Javascript执行效率全面总结
Nov 04 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Python常见字典内建函数用法示例
2018/05/14 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
高中生操行评语
2014/04/25 职场文书
奉献演讲稿范文
2014/05/21 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
教师节寄语2015
2015/03/23 职场文书
2015党建工作简报
2015/07/21 职场文书
生产设备维护保养制度
2015/08/06 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript