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 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
VueJS全面解析
2016/11/10 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
python提取内容关键词的方法
2015/03/16 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python异常处理例题整理
2019/07/07 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
安全生产责任书范本
2014/04/15 职场文书
C++程序员求职信
2014/05/07 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
旅游文化节策划方案
2014/06/06 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2014年图书室工作总结
2014/12/09 职场文书
运动会闭幕词
2015/01/28 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
Python基础 括号()[]{}的详解
2021/11/07 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技