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

  
  

奈斯