在 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 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
vue登录路由验证的实现
Dec 13 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
原生JavaScript实现轮播图
Jan 10 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
是否存在第一台收音机的说法
2021/03/01 无线电
从php核心代码分析require和include的区别
2011/01/02 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python open读写文件实现脚本
2008/09/06 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python装饰器常见使用方法分析
2019/06/26 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
办公室综合文员岗位职责范本
2014/02/13 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL