Angular6学习笔记（八）Angular中异步处理总结---RXJS

在Angular中对异步数据的处理有以下几种:

回调函数PromiseRXJS

这里我们直接贴代码，前提是有可用的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);