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

ゝ一世哀愁。 2023-02-22 13:31 24阅读 0赞

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