在 Angular6 中使用 HTTP 请求服务端数据的步骤详解


Posted in Javascript onAugust 06, 2018

第一步

准备好api接口地址, 例如 https://api.example.com/api/

第二步

在根组件 app.components.ts 中引入 HttpClientModule 模块。

// app.components.ts
import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块
imports: [
 BrowserModule,
 AppRoutingModule,
 HttpClientModule //声明HTTP模块
],

第三步

在组件中使用HTTP模块向远程服务器请求数据

1.引入HTTP模块

// list.components.ts
import { HttpClient } from "@angular/common/http" //这里是HttpClient

2.在组件的构造函数中实例化 HttpClient

constructor(private http:HttpClient){}

3.创建用来接收数据的变量

public anyList:any

4.通过HTTP的get方法请求数据

ngOnInit() { //这个是初始化
 this.http.get("https://api.example.com/api/list")
   .subscribe(res=>{ this.anyList = res })
}
// get方法中接收的是一个接口文件的地址,它会接收接口传递过来的数据,并默认处理为json数据。
// subscribe方法是对get接收的数据进行处理。参数 res 就是接收过来的数据对象。然后把 res 对象赋值给anyList变量。

5:前台输出

// list.component.html

<ul *ngFor="let v of anyList"> 循环输出anyList对象数据
 <a routerLink="/post/{{v.id}}"> 这里的routerLink是angular的a链接形式
  <img src="{{v.thumb}}" alt=""> 这里的v.thumb是调用anyList对象的每条数据的thumb缩略图
  <h3>{{v.name}}</h3>
 </a>
</ul>

打开前台页面,就可以看到输出的数据信息了。

总结

以上所述是小编给大家介绍的在 Angular6 中使用 HTTP 请求服务端数据的步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
React实现动效弹窗组件
Jun 21 Javascript
animate.css在vue项目中的使用教程
Aug 05 #Javascript
iconfont的三种使用方式详解
Aug 05 #Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 #Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
深入理解JavaScript的async/await
Aug 05 #Javascript
js数据类型检测总结
Aug 05 #Javascript
You might like
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Pycharm更换python解释器的方法
2018/10/29 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
金融管理应届生求职信
2014/02/20 职场文书
《王二小》教学反思
2014/02/27 职场文书
元旦活动感言
2014/03/08 职场文书
社区党务工作总结2015
2015/05/19 职场文书
学校教学管理制度
2015/08/06 职场文书
《风筝》教学反思
2016/02/23 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书