angular-异步获取数据-Filter 数据过滤 map 数据操作 使用
| https://gitee.com/sw521/Angular-demo | 练习的demo下载地址 |
|---|---|
异步
getCallbackData(cb) {
setTimeout(() => {
var username = '张三';
//return data;
cb(username);
}, 1000);
}
Es6
getPromiseData() {
return new Promise((resolve)=>{
setTimeout(() => {
var usernmae ='张四';
resolve(usernmae);
}, 1000);
})
}
Rxjs异步获取数据 订阅
getRxjsData(){
return new Observable((observer)=>{
setTimeout(() => {
var username ='张五月';
observer.next(username);
observer.error('失败');
}, 1000);
})
}
//同步；
//let data = this.request.getData();
// console.log(data);
this.request.getCallbackData((data)=>{
console.log(data);
})
//promise获取数据
let parmoseData= this.request.getPromiseData();
parmoseData.then((data)=>{
console.log(data);
})
//rxjs获取异步方法里面的数据
var rxjsData = this.request.getRxjsData();
rxjsData.subscribe((data)=>{
console.log(data);
});
Filter 数据过滤 map 数据操作 使用
import {
map,filter } from 'rxjs/operators';
//工具方法处理返回数据
let streemintervaDataNum = this.request.getRxjsDatasNum();
streemintervaDataNum.pipe(
filter((value)=>{
if(value%2==0){
return true;
}
}),
map((value)=>{
//return value*value;
})
)
.subscribe((data) => {
// console.log(data);
})
}
}
Angular 数据 http
getData(){
//alert('get')
let api="http://a.itying.com/api/productlist";
this.http.get(api).subscribe((response:any)=>{
console.log(response);
this.list=response.result;
})
}
Post提交数据
import {
HttpClient,HttpHeaders } from '@angular/common/http';
const httpOptions={
headers: new HttpHeaders({
'content-Type':'application/json'})
}
setPost(){
//alert('get')
let api="http://127.0.0.1:3000/dologin";
this.http.post(api,{
"username":"张三",'age':20},this.httpOptions).subscribe((response)=>{
console.log(response);
})
}
不能跨域 用 跨域的一种解决方案
Jsonp 获取服务器数据
getJsonpData(){
let api="http://a.itying.com/api/productlist";
this.http.jsonp(api,'callback').subscribe((response)=>{
console.log(response);
}
)}
Vscode 一定要装这个插件 不然他不跳转，， 看不到内部实现 新版应该更新了 先这样搞
Ajax 用到第三方模块 优秀。。。
https://github.com/axios/axios
保存到 软件包config里
Ok 存上了
就是这个漏洞有点尴尬
安全真是个大问题 代码审计
封装到服务里
注意
import axios from ‘axios’;
直接copy拿来就用
axiosGet(api) {
return new Promise((resolve, reject) => {
axios.get(api)
.then(function (response) {
// handle success
resolve(response);
})
})
}