浅谈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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python友情链接检查方法
2015/07/08 Python
python3音乐播放器简单实现代码
2020/04/20 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python conda操作方法
2019/09/11 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
表彰先进的通报
2014/01/31 职场文书
《日月潭》教学反思
2014/02/28 职场文书
求职自荐信怎么写
2014/03/06 职场文书
签约仪式策划方案
2014/06/02 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
年度考核个人总结
2015/03/06 职场文书
军训后的感想
2015/08/07 职场文书