浅谈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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
Javascript动画效果(3)
Oct 11 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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 ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
两款万能的php分页类
2015/11/12 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
浅谈五大Python Web框架
2017/03/20 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python实现飞机大战项目
2020/03/11 Python
办公室文秘自我评价
2013/09/21 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
旷课检讨书1000字
2014/02/14 职场文书
仓库文员岗位职责
2014/04/06 职场文书
个人承诺书格式
2014/06/03 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android