Angular 请求数据 get post 以及 jsonp 请求数据

引入 HttpModule 、JsonpModule

普通的 HTTP 调用并不需要用到 JsonpModule，不过稍后我们就会延演示对 JSONP 的支持，所以现在就加载它，免得再回来浪费时间。

引入模块

注意：JSONP 在4版本以后已经被弃用了...

import { HttpClientJsonpModule, HttpClientModule } from ‘@angular/common/http‘;

在 import 中注入模块

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientJsonpModule,
    HttpClientModule
  ],

在使用文件引用

import {HttpClient,JsonpClientBackend} from ‘@angular/common/http‘

在构造函数中声明

  constructor(private http:HttpClient,private jsonp:JsonpClientBackend) {

   }

HTTP 请求GET数据

  /***请求数据 */
  requestData(){
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"

    this.http.get(url).subscribe(function(data){
      // 如果请求成功运行此代码
      console.log(data)
    },function(err){
      // 如果请求失败运行此代码
      console.log(err)
    })
  }

返回的数据格式为 json 字符串。

解析获取的数据

ts 文件

import { Component, OnInit } from ‘@angular/core‘;
import { HttpClient, JsonpClientBackend } from ‘@angular/common/http‘

@Component({
  selector: ‘app-mdata‘,
  templateUrl: ‘./mdata.component.html‘,
  styleUrls: [‘./mdata.component.css‘]
})
export class MdataComponent implements OnInit {

  public list: any;

  constructor(private http: HttpClient, private jsonp: JsonpClientBackend) {

  }

  ngOnInit() {
  }

  /***请求数据 */
  requestData() {

    var _that = this;

    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"

    this.http.get(url).subscribe(function (data) {
      // 如果请求成功运行此代码
      // console.log(data)
      // 将json字符串转换为json对象 这个网址在请求的时候是对象，不必转换
      // console.log(JSON.parse(data))
      _that.list = data[‘result‘];
      console.log(_that.list)

    }, function (err) {
      // 如果请求失败运行此代码
      console.log(err)
    })
  }

}

html 文件

<h2>请求数据</h2>

<button  (click)="requestData()">请求数据</button>

<ul>
    <li *ngFor="let item of list" >
        {{item.title}}
    </li>
</ul>

HTTP 请求Post数据

和GET请求一样，引入模块等一系列操作...

引入 headers 模块

import { HttpClient, HttpHeaders } from ‘@angular/common/http‘

设置请求头

private headers = new Headers({‘Content-Type‘: ‘application/json‘});

使用 POST 请求数据

Jsonp 请求数据

　　已经被 angular 弃用了....

原文地址：https://www.cnblogs.com/wjw1014/p/10350260.html