angular httpClient大全

• 引入来自it营

Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。

使用步骤：

1、在 app.module.ts 中引入 并注入

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

imports: [
    HttpClientModule
]

2、在你需要用的组件中引入HttpClient 并在构造函数中声明

import {HttpClient，HttpParams, HttpHeaders} from "@angular/common/http";  //如果需要设置请求头和请求参数，则引入HttpParams, HttpHeaders
constructor(public http:HttpClient) { } 

 

3、get请求数据

var api = url;

  dataSource:any[]=[];

const params=new HttpParams().set(‘currentpage’,1).set();
this.http.get(api,{params:new HttpParams().set('type','1'),headers}).subscribe((response:any)=> {   //这里的response一定要加any类型，不然下面的result无法定义
    if(response['code']==200){
        this.data=response.result;
    } 
});

4、post请求

const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

this.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe((response:any)=> {
  console.log(response); 
});

 

5、jsonp请求数据

在appmodulets中导入HttpClientJsonpModule 
import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';
imports: [ BrowserModule, HttpClientModule, HttpClientJsonpModule]

在需要的组件中导入HttpClient,并注入
import {HttpClient} from "@angular/common/http";

constructor(public http:HttpClient) { }

jsonp数据
var api = "http://a.itying.com/api/productlist"; this.http.jsonp(api,'callback').subscribe(response => {
console.log(response); });

6、Angular 中使用第三方模块 axios 请求数据

1、安装 axios
cnpm install axios --save

2、用到的地方引入 axios
import axios from 'axios';

3、使用
axios.get('/user?ID=12345') .then(function (response) {
// handle success
console.log(response); })
.catch(function (error) { // handle error console.log(error);
})
.then(function () {
// always executed });