Angular4 使用GET向后端请求数据

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