[转载]Angular中的数据请求实现（get、post、jsonp）HttpClient

1、Angular自带的Http请求（get、post、jsonp）获取数据

需要在app.module.ts 引入

import { HttpClientModule } from '@angular/common/http';

并注入

imports: [

    ...

    HttpClientModule,

    ...

]

 

以下用到需要引入的类

 

import { Observable } from 'rxjs';

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

 

get方法

constructor(private httpclient: HttpClient) { }

//可以定制公共header 用来验证等
public httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' });
};

getData_http(url): Observable<object>
{
    return this.httpclient.get(url, this.httpOptions);
}

使用方法

//angular 自带 get;
this.httphelpService.getData_http("获取list的网址").subscribe((data)=>{
    console.log(data);
},(errdata)=>{
    console.log(errdata);
});

 

post方法

postData_http(url,body): Observable<object>
{
    return this.httpclient.post(url,body,this.httpOptions);
}

使用方法

this.httphelpService.postData_http("提交数据的网址",{key:"value"}).subscribe((data)=>{
    console.log(data);
},(errdata)=>{
    console.log(errdata);
});

 

jsonp方法

jsonp需要在app.module里面引入并声明HttpClientJsonpModule

 

import { HttpClientJsonpModule } from '@angular/common/http';

 

imports: [

    ...

    HttpClientJsonpModule,

    ...

]

getDataJsonP_http(url,callbackparams):Observable<object>
{
    return this.httpclient.jsonp(url,callbackparams);
}

使用方法

this.httphelpService.getDataJsonP_http("jsonp的访问地址","callback").subscribe((data)=>{
    console.log(data);
},(errdata)=>{
    console.log(errdata);
});

 

如果不引入声明HttpClientJsonpModule，会出现以下报错

Attempted to construct Jsonp request without JsonpClientModule installed.

 

 

 

 

 

 

 

 

转载请说明出处：原文链接 http://www.nbsite.cn/qdjs/162