在 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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
jquery 上下滚动广告
Jun 17 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
jQuery返回定位插件详解
May 15 jQuery
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 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
珊瑚虫IP库浅析
2007/02/15 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
一个PHP的String类代码
2010/04/20 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
python的类方法和静态方法
2014/12/13 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python3生成手写体数字方法
2018/01/30 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python中extend和append的区别讲解
2019/01/24 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python复合条件下的字典排序
2020/12/18 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
局域网标准
2016/09/10 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
儿科护士实习自我鉴定
2013/10/17 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
教师个人成长总结
2015/02/11 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python