一、Angular get请求数据
Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。
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请求数据
var url= "http://127.0.0.1:8080/api/productlist";
this.http.get(url).subscribe (response =>{
console.log(response);
})
二、Angular post提交数据
Angular5.x以后get, post和和服务器交互使用的是HttpClientModule模块。
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提交数据
var url="http://127.0.0.1:8080/doLogin";
this.http.post(url, {"age":22,"username":"zl"})
.subscribe((response)=>{
console.log(response)
})
三、Angular 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";
3, post提交数据
var url="http://127.0.0.1:8080/doLogin";
this.http.jsonp(url,"callback").subscribe((response:any)=>{
this.userList=response;
console.log(response)
})
四、Angular中使用第三方模块axios请求数据
1、安装axios
cnpm install axios --save
2、用到的地方引入axios
import axios from 'axios";
3,get请求
var url= "http://127.0.0.1:8080/api/productlist"; axios.get(url) .then(function (response){ console.log(response) )}
五,在服务(service)中通过Promise封装请求
get(api){
return new Promise((resolve, reject)=>{
this.http.get(api).subscribe( (response)=>{
resolve(response);
})
})
}
在用到的组件中引入服务,然后调用方法
import { CommonService } from '../../services/common.service';
constructor(public common:CommonService) { }
this.common.get(api).then((response)->{
console. log (response);
})