Angular笔记 处理异步

目前常见的异步编程的几种方法:
1、回调函数
2、Promise
3、Rxjs
4、事件监听/发布订阅

一、函数回调

回调一个方法，在需要的地方进行调用。

函数声明

//1 函数回调
  getCallBack(cb){
    setTimeout(() => {
      let name = "1 函数回调";
      cb(name);
    }, 0);
  }

函数调用

 //1 回调函数 -->(值:类型)=>{方法}
  callBack1(){
    this.testService.getCallBack((data:any)=>{
      console.log(data);
    });
  }

二、Promise

函数声明

//2 Promise 回调
  getPromiseData(){

    return new Promise((resolve:any,reject:any)=>{
      setTimeout(() => {
        let name = "2 Promise 回调";
        resolve(name);
      }, 0);
    });
  }

函数调用

//2 Promise 回调
  getPromiseData(){
    let promiseData = this.testService.getPromiseData();
    promiseData.then((data)=>{
      console.log(data);
    });
    promiseData.catch(()=>{

    });
  }

三、Rxjs

函数声明

//3 Rxjs 回调
  /*
      1.//引入 rxjs
      import {Observable} from 'rxjs';

      2.创建 Observable
  */
  getRxjsData(){

    return new Observable((observable:any)=>{
      setTimeout(() => {
        let name = "3 Rxjs 回调";
        observable.next(name);

        // observable.error("调用失败");
        
      }, 0);
    });
  }

函数调用

//3 Promise 回调
  getRxjsData(){
    let rxjsData = this.testService.getRxjsData();
    let sub:any = rxjsData.subscribe((data:any)=>{
      console.log(data);
    });
    //取消执行
    sub.unsubscribe();
  }

四、事件监听/发布订阅

参见通知

全部代码

创建了一个服务，服务ts中的代码如下

import { Injectable } from '@angular/core';
import { promise } from 'protractor';
import { resolve } from 'path';
import { reject } from 'q';

//引入 rxjs
import {Observable, observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TestserviceService {

  constructor() { }



  //这是服务的测试方法
  test(){
    alert("这是服务的测试方法");
  }

  //1 函数回调
  getCallBack(cb){
    setTimeout(() => {
      let name = "1 函数回调";
      cb(name);
    }, 0);
  }
  
  //2 Promise 回调
  getPromiseData(){

    return new Promise((resolve:any,reject:any)=>{
      setTimeout(() => {
        let name = "2 Promise 回调";
        resolve(name);
      }, 0);
    });
  }

  //3 Rxjs 回调
  /*
      1.//引入 rxjs
      import {Observable} from 'rxjs';

      2.创建 Observable
  */
  getRxjsData(){

    return new Observable((observable:any)=>{
      setTimeout(() => {
        let name = "3 Rxjs 回调";
        observable.next(name);

        // observable.error("调用失败");
        
      }, 0);
    });
  }

}

创建了一个组件，组件ts中的代码如下

import { Component, OnInit } from '@angular/core';

//导入服务
import { TestserviceService } from '../../services/testservice.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(public testService:TestserviceService) { }

  ngOnInit() {
  }


  // 测试服务
  testServices(){
    this.testService.test();

  }
  

 //1 回调函数 -->(值:类型)=>{方法}
  callBack1(){
    this.testService.getCallBack((data:any)=>{
      console.log(data);
    });
  }

  //2 Promise 回调
  getPromiseData(){
    let promiseData = this.testService.getPromiseData();
    promiseData.then((data)=>{
      console.log(data);
    });
    promiseData.catch(()=>{

    });
  }

  //3 Promise 回调
  getRxjsData(){
    let rxjsData = this.testService.getRxjsData();
    rxjsData.subscribe((data:any)=>{
      console.log(data);
    });
  }
  
}

创建了一个组件，组件html中的代码如下

<p>home works!</p>
<br>
<button (click)="testServices()">测试服务导入</button>
<br>
<br>
<button (click)="callBack1()">回调函数</button>
<br>
<br>
<button (click)="getPromiseData()">getPromiseData</button>
<br>
<br>
<button (click)="getRxjsData()">getRxjsData</button>