【Angular】Angular中的数据交互（get/post/jsonp/axios）

Angular5.x之后使用get、post请求服务器数据使用的是HttpClientModule模块。

1.get获取数据

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

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

imports: [
	BrowserModule,
	HttpClientModule
]

2、在用到的地方引入HttpClient并在构造函数中声明

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

constructor(public http:HttpClient){}

3、get请求数据

public resultlist:any[] = []; //定义一个接收结果的空数组

let api = "htttp://123.3.3.3";
this.http.get(api).subscribe((response:any) => {
	console.log(response);
	this.resultlist = response.result;
});

<li *ngFor="let item of resultlist">{{item.title}}</li> //模板中使用

2.post提交数据

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

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

imports: [
	BrowserModule,
	HttpClientModule
]

2、在用到的地方引入HttpClient、HttpHeaders并在构造函数中声明

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

constructor(public http:HttpClient){}

3、post提交数据

const httpOptions = {  //手动设置请求类型
	headers: new HttpHeaders({'Content-Type':'application/json'})
};
let api = "htttp://123.3.3.3";
this.http.post(api,{username:'张三'，age:'20'},httpOptions).subscribe((response:any) => {
	console.log(response);
});

3.jsonp获取服务器数据，可以跨域

1、在app.module.ts中引入HttpClientModule、HttpClientJsonpModule模块并注入

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

imports: [
	BrowserModule,
	HttpClientModule,
	HttpClientJsonpModule
]

2、在用到的地方引入HttpClient并在构造函数中声明

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

constructor(public http:HttpClient){}

3、jsonp请求数据(服务器要支持jsonp)

let api = "htttp://123.3.3.3";
this.http.jsonp(api,'callback').subscribe((response:any) => {
	console.log(response);
});

4.axios第三方模块