浅谈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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
js Date概念详细介绍
Nov 22 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
layui框架与SSM前后台交互的方法
Sep 12 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
星际争霸中的热键
2020/03/04 星际争霸
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
开发Vue树形组件的示例代码
2017/12/21 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python设置值及NaN值处理方法
2018/07/03 Python
Linux下python制作名片示例
2018/07/20 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
python如何快速生成时间戳
2020/07/21 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
小学一年级学生评语
2014/04/22 职场文书
维稳承诺书
2015/01/20 职场文书
2015年检验科工作总结
2015/04/27 职场文书
文书工作总结(范文)
2019/07/11 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers