Angular4 使用GET向后端请求数据

最新推荐文章于 2021-11-11 17:29:46 发布

原创最新推荐文章于 2021-11-11 17:29:46 发布 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #js #get #请求 #后台

angular 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Angular4中使用HTTP和JSONP模块发起GET请求从后端获取数据。包括如何配置项目、注入依赖以及在组件中实现具体的请求逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/download/chanchaw/10584431