Angular4 使用GET向后端请求数据
-
在工程的src/app/app.module.ts的头部引入http、jsonp：
import { HttpModule,JsonpModule } from '@angular/http';
-
在工程的src/app/app.module.ts的imports下注入依赖：
HttpModule,JsonpModule
-
在需要用到请求的组件中要再次引入，本次的引入同app.module.ts中的引入名称不完全一致，但是同一个东西：
import { Http,Jsonp,Headers } from '@angular/http';
-
在构造方法中实例化对象：
constructor(private http:Http,private jsonp:Jsonp) {
}
然后在本组件中就可以使用了：this.http.get(url)xxxxx
-
使用GET方法向后台请求数据的方法是：
reqData(){ // 向后台请求数据
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";//视频教程中的测试用请求地址
// 后面的异步请求中不可直接使用this，在异步中使用的this
// 和这里的this不同
var _that = this;
this.http.get(url).subscribe(function(data){//请求成功的回调函数
_that.list = JSON.parse(data['_body']);
_that.list =_that.list['result'];
},function(err){// 请求失败的回调函数
console.log(err);
})
}
-
使用jsonp请求数据的方法是：
reqJsonp(){ // 向后台请求数据
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK";//视频教程中的测试用请求地址
var _that = this;
// console.log(_that);
this.jsonp.get(url).subscribe(function(data){//请求成功的回调函数
_that.list =data['_body']['result'];
},function(err){// 请求失败的回调函数
console.log(err);
})
}
-
前端的HTML文件中的调用方法是：
<button (click)="reqData()">使用http获取数据</button>
-
下面是整个项目的打包的源码，项目使用了Node.js v10.7.0，Angular CLI:6.1.1
https://download.csdn.net/download/chanchaw/10584431
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
