在Angular中有四种数据交互方式,分别是get请求数据,post提交数据,Jsonp请求数据和第三方模块axios请求数据。
一、Angular get 请求数据
在app.modules.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请求数据
//这是接口地址
var api="http://www.baidu.com/api/homes";
this.http.get(api).subscribe(response =>{
console.log(response);
});
二、Angular post提交数据
1.在app.module.ts中引入HttpClientModule
import {HttpClientModule} from '@angular/common/http'
imports:[
BrowserModule,
HttpClientModule,
]
2.在用到的地方引入HttpClient,HttpHeaders并在构造函数中声明HttpClient
import{HttpClient,HttpHeaders } from '@angular/common/http';
constructor(public http:HttpClient) { }
3.post提交数据
const httpPoint={
headers:new HttpHeaders({'Content-Type':'application/json'})
};
var api="http://127.0.0.1:4000/doLogin";
this.http.post(api,{username:‘小练’,age:'20'},httpPoint).subscribe(response =>{
console.log(response);
});