[转载]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(privatehttpclient:HttpClient){}//可以定制公共header用来验证等publichttpOptions={headers:newHttpHeaders({'Content-Type':'application/json'});};getData_http(url):Observable<object>{returnthis.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>{returnthis.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>{returnthis.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.

转载请说明出处：原文链接 /qdjs/162