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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
原生js调用json方法总结
Feb 22 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
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结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python学习笔记之os模块使用总结
2014/11/03 Python
Python functools模块学习总结
2015/05/09 Python
python中学习K-Means和图片压缩
2017/11/20 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python3 xpath和requests应用详解
2020/03/06 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
介绍一下linux文件系统分配策略
2013/02/25 面试题
个性婚礼策划方案
2014/05/17 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
六一儿童节标语
2014/10/08 职场文书
领导欢迎词范文
2015/01/26 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
Win11开始菜单添加休眠选项
2022/04/19 数码科技
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技