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

在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);