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.

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

转载请说明出处:第六感博客 原文链接:

相关阅读:

bootcdn又挂了(bootcss.com),推荐几个其他cdn的站点

使用 Angular CLI (ng generate)创建组件、服务、类、路由、指令、管道

Angular异步获取操作数据方法汇总

Angular响应式表单校验及提交主动触发所有校验