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