一、 Angular 请求数据
1.在app.module.ts中导入
//angular 自带的HTTP请求 模块
import {HttpClientModule} from '@angular/common/http';
在imports中引入[HttpClientModule,]2.在要调用请求的地方再次导入
//angular 自带的HTTP请求 模块
import {HttpClient} from "@angular/common/http";
//angular 自带的HTTP请求 模块 （请求头设置 post方式）
import {HttpHeaders} from '@angular/common/http';
1. get 请求数据
声明
constructor(public http:HttpClient) { }
//自带get请求封装
angularGet(url:string){
return new Observable((observable)=>{
this.http.get(url).subscribe(response => {
observable.next(response);
},(error)=>{
observable.error(error);
})
});
}
调用
angularGet(){
var url:string = "http://a.itying.com/api/productlist";
let rxjsData = this.requestservice.angularGet(url);
rxjsData.subscribe((response:any)=>{
console.log("成功啦");
console.log(response);
this.list = response.result;
},(error:Object)=>{
console.log("出错啦");
});
}
2. post 请求数据
constructor(public http:HttpClient) { }
//自带post请求封装
constructor(public http:HttpClient) { }
angularPost(url:string,parameter:any){
const httpOptions:any = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
return new Observable((observable)=>{
this.http.post(url,parameter,httpOptions).subscribe(response => {
observable.next(response);
},(error)=>{
observable.error(error);
})
});
}
调用
angularPost(){
let url:string = "http://127.0.0.1:3000/doLogin";
let parameter:any = {username:'张三',age:'20'};
let rxjsData = this.requestservice.angularPost(url,parameter);
rxjsData.subscribe((response:any)=>{
console.log("成功啦");
console.log(response);
this.list = response.result;
},(error:Object)=>{
console.log("出错啦");
console.log(error);
});
}
二、 Angular Jsonp 请求数据
1.在app.module.ts中导入
//angular 自带的HTTP请求 模块
import {HttpClientModule} from '@angular/common/http';
//angular Jsonp 请求 模块
import {HttpClientJsonpModule} from '@angular/common/http';
在imports中引入[HttpClientModule,HttpClientJsonpModule]2.在要调用请求的地方再次导入
angular 自带的HTTP请求 模块
import {HttpClient} from "@angular/common/http";
声明
//jsonp get请求封装
constructor(public http:HttpClient) { }
jsonpGet(url:string){
return new Observable((observable)=>{
this.http.jsonp(url,"callback").subscribe(response => {
observable.next(response);
},(error)=>{
observable.error(error);
})
});
}
调用
jsonpGet(){
var url:string = "http://a.itying.com/api/productlist";
let rxjsData = this.requestservice.jsonpGet(url);
rxjsData.subscribe((response:any)=>{
console.log("成功啦");
// console.log(response);
this.list = response.result;
},(error:Object)=>{
console.log("出错啦");
});
}
三、 Angular 中使用第三方模块 axios 请求数据
1、安装 axios
cnpm install axios --save
2、用到的地方引入
axios import axios from 'axios';
3、看文档使用
axios 中文说明
声明
//引入第三方框架
import axios from 'axios';
//axios get请求封装
axiosGet(url:string){
return new Observable((observable)=>{
axios.get(url)
.then(function (response) {
// handle success
observable.next(response);
})
.catch(function (error) {
// handle error
observable.error(error);
})
.then(function () {
// always executed
});
});
}
//axios post请求封装
axiosPost(url:string,parameter:any){
return new Observable((observable)=>{
axios.post(url, parameter)
.then(function (response) {
// console.log(response);
observable.next(response);
})
.catch(function (error) {
// console.log(error);
observable.error(error);
});
});
}
调用
axiosGet(){
var url:string = "http://a.itying.com/api/productlist";
let rxjsData = this.requestservice.axiosGet(url);
rxjsData.subscribe((response:any)=>{
console.log("成功啦");
console.log(response);
this.list = response.data.result;
},(error:Object)=>{
console.log("出错啦");
console.log(error);
});
}
axiosPost(){
let url:string = "http://127.0.0.1:3000/doLogin";
let parameter:any = {username:'张三',age:'20'};
let rxjsData = this.requestservice.axiosPost(url,parameter);
rxjsData.subscribe((response:any)=>{
console.log("成功啦");
console.log(response);
this.list = response.result;
},(error:Object)=>{
console.log("出错啦");
console.log(error);
});
}
