Angular 数据请求的实现方法


Posted in Javascript onMay 07, 2018

使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块

import { HttpModule, JsonpModule } from '@angular/http'

然后在当前模块中的 imports 内进行注册

imports: [
 HttpModule,
 JsonpModule
],

注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了

import { Http, Jsonp } from '@angular/http'

然后在当前组件的构造函数当中进行注入以后就可以使用了

constructor(private http: Http, private jsonp: Jsonp) { }

使用如下,一个简单的 get 请求

// 进行注入,拿到相对应的方法
constructor(private http: Http, private jsonp: Jsonp) { }
public list: any = []
// 请求数据
getData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
 let _this = this
 this.http.get(url).subscribe((data) => {
  _this.list = JSON.parse(data['_body'])['result']
  console.log(_this.list)
 })
}

前台进行渲染即可

<button (click)="getData()">get 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

JSONP 请求数据

注意区分与 get 请求的区别,使用如下

// 请求数据
jsonpData() {
 let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK'
 let _this = this
 this.jsonp.get(url).subscribe((data) => {
  _this.list = data['_body']['result']
  console.log(_this.list)
 })
}
// 渲染
<button (click)="jsonpData()">jsonp 请求数据</button>
<ul>
 <li *ngFor="let item of list">
  {{item.title}}
 </li>
</ul>

不同点

请求的 url 参数结尾必须要添加指定的回调函数名称 &callback=JSONP_CALLBACK

请求的方式变为 this.jsonp.get(url)

请求后得到的数据格式不统一,需要自行进行调整

POST 请求

与 GET 的请求方式有些许不同,首先需要引入请求头 { Headers }

import { Http, Jsonp, Headers } from '@angular/http'

然后来对请求头进行定义,需要先实例化 Headers

private headers = new Headers({'Content-Type': 'application/json'})

最后在提交数据的时候带上 Headers 即可

postData() {
 let url = 'http://localhost:8080/login'
 let data = {
  "username": "zhangsan",
  "password": "123"
 }
 this.http.post(
  url,
  data,
  {headers: this.headers}
 ).subscribe((data) => {
  console.log(data)
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
JavaScript数组去重算法实例小结
May 07 #Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 #Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 #Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 #Javascript
Vue 实现树形视图数据功能
May 07 #Javascript
JavaScript 跨域之POST实现方法
May 07 #Javascript
ES6关于Promise的用法详解
May 07 #Javascript
You might like
理解php Hash函数,增强密码安全
2011/02/25 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jQuery插件扩展测试实例
2016/06/21 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
用Vue写一个分页器的示例代码
2018/04/22 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python 常用的基础函数
2018/07/10 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
公司前台辞职报告
2014/01/19 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
汇报材料怎么写
2014/12/30 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python