angular4.x请求数据http(get、post、jsonp)

2017-11-05

angular4.x http get post以及 jsonp数据请求

请求数据

但是我的是6.1版本的也好使但是get需要自己去处理数据
一、app.module.ts 注册 HTTP，JSONP 服务
普通的 HTTP 调用并不需要用到 JsonpModule，不过稍后我们就会演示对 JSONP 的支持，所以现在就加载它，免得再回来改浪费时间。
1.引入 HttpModule 、JsonpModule

2.HttpModule 、JsonpModule 依赖注入

import { HttpModule, JsonpModule } from '@angular/http';
/*浏览器解析模块*/
import { BrowserModule } from '@angular/platform-browser';
/*angular核心模块*/
import { NgModule } from '@angular/core';
 /*FormsModule表单模块*/
import { FormsModule } from '@angular/forms';
/*自定义模块*/
import { AppComponent } from './app.component';
import { HttpNewsComponent } from './components/http-news/http-news.component';
/*引入服务*/
import { StorageService } from './service/storage.service';
/*引入http jsonp请求服务 */
import { HttpModule, JsonpModule } from '@angular/http';
/*
  @NgModule装饰器将AppModule标记为Angular模块类（也叫NgModule类）
  NgModule类接收一个元数据对象，告诉Angular如何编译启动应用
*/
@NgModule({
  declarations: [/*引入自定义组件 并且所有组件都需要在这里面声明一下*/
    AppComponent,  HttpNewsComponent
  ],
  imports: [  /*当前项目依赖哪些模块*/
    BrowserModule,
    FormsModule, //表单双向数据绑定模块
    HttpModule,  //Http模块
    JsonpModule, //Jsonp模块
  ],
  providers: [StorageService], /*定义的服务(公共方法) 放在这里面*/
  bootstrap: [AppComponent] /*默认运行启动哪个组件*/
})
/*根模块不需要导出任何东西 因为其他组件不需要导入根模块 但一定要写 */
export class AppModule { }

二、通过 Http、Jsonp 请求数据、不用 RxJs

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；不管如何解释 RxJS 其目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
**1、app.module.ts 引入并且依赖注入完成以后，在需要用到的地方执行下面操作。**
Angular的get请求方式
1
import {Http,Jsonp} from "@angular/http";
2、构造函数内申明
3、对应的方法内使用 http 请求数据

subscribe里边分别传入一个成功和失败的回调函数

public list:any[];
constructor(private http:Http,private jsonp:Jsonp) { }
requestData(){//自定义点击事件注意this指向
  let _that = this;
  let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
  this.http.get(url).subscribe(function (data) {
     //必须这样写 否则会报错data['_body']、list['result']
     //拿到的是json字符串 需要转换成json对象
      var list = JSON.parse(data['_body']);
      _that.list = list['result'];
    }, function (err) {
      console.log('失败');
    }
    );
}

get的另一种方式 HttpClient不用处理数据 4.3版本+

HttpClient能力在angular 4.3版本开始引入在@angular/common/http中
基本使用方法与原Http服务类似，先引入HttpClientModule，然后注入HttpClient服务使用：

app.module.ts配置

import { HttpClientModule } from '@angular/common/http';
// ...
@NgModule({
 import: [ HttpClientModule ]
})
// ...

import { HttpClient } from '@angular/common/http';
// ...
constructor(private http: HttpClient) {}
// ...
let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.http.get('url').subscribe((res) => {
 console.log(res);
}, (err) => {
 // 失败回调
});

改进与加强
1.支持更多类型的请求，比如更改可选参数的responseType值可改为直接请求text内容
2.不再需要手动调用json()来将结果转为json格式，订阅到的结果已经是body且转为了json(请求text的话直接就是text内容)。
3.支持监听请求进度(可用于文件上传)。
4.添加了拦截器能力，用于预设请求规则和响应预处理。
Angular的post请求方式不用 RxJs
1、import { Http,Jsonp,Headers } from ‘@angular/http’;

2、Headers 定义请求头的

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

3、post提交数据

import { Http, Jsonp, Headers } from '@angular/http';
export class HttpNewsComponent implements OnInit {
    public list: any[];
    private headers = new Headers({ 'Content-Type': 'application/json' });
    constructor(private http: Http, private jsonp: Jsonp) {

    }
    postData() {
      var url = ' https://www.easy-mock.com/mock/5b922aea782c561fa9e4ba6c';
      var data_ = JSON.stringify({ "username": 'zhangsan', "age": '20' });
      this.http.post(url + `${'/mockapi/post'}`, data_,{ headers: this.headers })
      .subscribe(
      function (data) {
        console.log(data);
      }, function (error) {
        console.log(error);
      });
    }
}

Angular的jsonp请求方式不用 RxJs

jsonp 必须得在url加回到 &callback=JSONP_CALLBACK

requestJsonpData() {
  // jsonp 必须得在url加回到  &callback=JSONP_CALLBACK
  var _that = this;
  var url = 'http://www.phonegap100.com/appapi.php
  ?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK';
  this.jsonp.get(url).subscribe(function (data) {
    //拿到的直接就是json对象
    _that.list = data['_body']['result'];
  }, function (err) {
    console.log(err);
  });
}

三、通过 Http、Jsonp 请求数据、使用 RxJs。

**之前没用RxJs的get方法中返回的是Observable对象,我们之后调用RXJS的map操作符返回的数据做处理**
需要用到请求数据的地方引入 Http 模块 Jsonp 模块，以及 rxjs
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
大部分 RxJS 操作符都不包括在 Angular 的 Observable 基本实现中，基本实现只包括Angular 本身所需的功能。
如果想要更多的 RxJS 功能，我们必须导入其所定义的库来扩展 Observable 对象，以下是这个模块所需导入的所有 RxJS 操作符：
1、引入 Http 、Jsonp、RxJs 模块
1
2
3
import {Http,Jsonp} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";
你可能并不熟悉这种 import ‘rxjs/Rx’语法，它缺少了花括号中的导入列表：{…}
这是因为我们并不需要操作符本身，这种情况下，我们所做的其实是导入这个库，加载并运行其中的脚本，它会把操作符添加到 Observable 类中。
2、构造函数内申明
1
constructor(private http:Http,private jsonp:Jsonp) { }
get的RxJS请求

旧版

mport { Http, Jsonp, Headers } from '@angular/http';
import { Observable } from "rxjs";
import "rxjs/Rx";
constructor(
    private http: Http, private jsonp: Jsonp
) {}
this.http.get(url).map(res => res.json()).subscribe((res) => {
  console.log(res);
}, (err) => {
  // 失败回调
});

get新版写法（6.1）

import { Http, Jsonp, Headers } from '@angular/http';
import { Observable } from "rxjs";
import { map} from 'rxjs/operators';
constructor(
    private http: Http, private jsonp: Jsonp
) {}
 var data_ = JSON.stringify({ "username": 'zhangsan', "age": '20' });
 this.http.get(url).pipe(map(res=>res.json())).subscribe((res) => {
   console.log(res);
 }, (err) => {
   // 失败回调
 });

jsonp的RxJS请求

旧版

mport { Http, Jsonp, Headers } from '@angular/http';
import { Observable } from "rxjs";
import "rxjs/Rx";
constructor(
    private http: Http, private jsonp: Jsonp
) {}
var url = 'http://www.phonegap100.com/appapi.php
?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK';
this.jsonp.get(url).map(res => res.json()).subscribe(function (data) {
   console.log(data)
}, function (err) {
  console.log(err);
});

新版（6.1 Http或者HttpClient都可以）

import { Http, Jsonp, Headers } from '@angular/http';
import { Observable } from "rxjs";
import { map} from 'rxjs/operators';
var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
&callback=JSONP_CALLBACK';
this.jsonp.get(url).pipe(map(res => res.json())).subscribe(function (data) {
  console.log(data);
}, function (err) {
  console.log(err);
});

请求数据

一、app.module.ts 注册 HTTP，JSONP 服务

二、通过 Http、Jsonp 请求数据、不用 RxJs

Angular的get请求方式

get的另一种方式 HttpClient不用处理数据 4.3版本+

Angular的post请求方式 不用 RxJs

Angular的jsonp请求方式 不用 RxJs

三、通过 Http、Jsonp 请求数据、使用 RxJs。

1、 引入 Http 、Jsonp、RxJs 模块

2、构造函数内申明

get的RxJS请求

jsonp的RxJS请求

Angular的post请求方式不用 RxJs

Angular的jsonp请求方式不用 RxJs

1、引入 Http 、Jsonp、RxJs 模块