在Angular中对异步数据的处理有以下几种:
- 回调函数
- Promise
- RXJS
这里我们直接贴代码,前提是有可用的Angular开发环境,然后我们自己建立一个测试组件home,然后自己建立一个服务common
然后在我们的app.component.html中引入home组件。
1、首先在common.services.ts中定义3种测试方法,这里用延迟函数模拟异步数据
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CommonService {
constructor() { }
// 回调
callBackData(cb) {
setTimeout(() => {
const username = 'zhangsan';
cb(username);
}, 1000);
}
// promise
promiseData() {
return new Promise((resolve => {
setTimeout(() => {
const username = 'zhangsan--promise';
resolve(username);
}, 2000);
}));
}
// rxjs
rxjsData() {
return new Observable((observer) => {
setTimeout(() => {
const username = 'zhangsan--observer';
observer.next(username);
// observer.error('error');
}, 3000);
});
}
}
2、在我们的测试组件的初始化时,分别调用服务的三个方法,来查看效果
import { Component, OnInit } from '@angular/core';
import {CommonService} from '../services/common.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private commonService: CommonService) {
}
ngOnInit() {
// 1、通过回调函数调用异步方法
this.commonService.callBackData((data) => {
console.log('通过回调函数调用异步方法:' + data);
});
// 2、通过promise调用异步方法
const promiseData = this.commonService.promiseData();
promiseData.then((data) => {
console.log('通过promise调用异步方法:' + data);
});
// 3、通过rxjs获得异步数据
const rxjsData = this.commonService.rxjsData();
rxjsData.subscribe((data) => {
console.log(data);
});
}
}
3、与promise不同的是,RXJS可以在中途取消订阅,基于上面的例子,假如我们在测试方法中过了1秒后,方法还没执行,则取消订阅,即,不对方法的返回值做处理。
// 4、通过rxjs获得异步数据 过1秒后取消订阅
const stream = this.commonService.rxjsData();
const d = stream.subscribe((data) => {
console.log(data);
});
setTimeout(() => {
d.unsubscribe(); // 取消订阅
}, 1000);