浅谈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 对象的创建与使用
Mar 09 Javascript
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
Prototype使用指南之string.js
Jan 10 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
javascript 闭包疑问
Dec 30 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php在线代理转向代码
2012/05/05 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Scrapy的简单使用教程
2017/10/24 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python目录和文件处理总结详解
2019/09/02 Python
opencv python如何实现图像二值化
2020/02/03 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
两只小狮子教学反思
2014/02/05 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL