在 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的几种方法
Oct 23 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
js实现抽奖功能
Nov 24 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
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遍历文件夹和文件列表示例分享
2014/03/11 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php猜单词游戏
2015/09/29 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python上下文管理器和with块详解
2017/09/09 Python
python列表的增删改查实例代码
2018/01/30 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python中的常量和变量代码详解
2018/07/25 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
个人借款协议书范本
2014/11/17 职场文书
同学聚会邀请函
2015/01/30 职场文书