Angular 003 依赖注入自定义服务实现异步处理

Angular 003 组件注入自定义服务-实现异步处理

服务AsyncService，用timeout来模拟异包装异步方法

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

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

  constructor() { }
// 同步方法
  getData(input:string){
    return input;
  }
// 使用callback的方式接收异步处理结果
  getDataAsyncByCallback(input:string, callback:any, timeout:number=1000) {
    setTimeout(() => {
      var result=`data=${input}, timeout=${timeout}`;

      return callback(result);
    }, timeout);
  }
// 使用Promise接收异步处理结果
  getDataAsyncByPromise(input:string, timeout:number=1000) : Promise<string> {
    var promise = new Promise<string>((resolve) => {
      setTimeout(() => {
        var result:string =`data=${input}, timeout=${timeout}`;
        resolve(result);
      }, timeout);
    });

    return promise;
  }
// 使用Rxjs的Observable接收异步处理结果
  getDataAsyncByRxjs(input:string, timeout:number=1000) : Observable<string> {
    var observable = new Observable<string>((oberver) => {
      setTimeout(() => {
        var result:string =`data=${input}, timeout=${timeout}`;
        oberver.next(result);
        // oberver.error("exception occurred");
      }, timeout);
    });

    return observable;
  }
}

组件AsyncTestComponent注入AsyncService

import { Component, OnInit } from '@angular/core';
import { AsyncService } from '../../../services/async.service'

@Component({
  selector: 'app-async-test',
  templateUrl: './async-test.component.html',
  styleUrls: ['./async-test.component.scss']
})
export class AsyncTestComponent implements OnInit {

// 定义了一些字段在UI看结果
  public synchronousTextIn:string='';
  public synchronousTextOut:string='';

  public asyncCallBackIn:string='';
  public asyncCallBackOut:string='';

  public asyncPromiseIn:string='';
  public asyncPromiseOut:string='';

  public asyncRxjsIn:string='';
  public asyncRxjsOut:string='';

  constructor(private asyncService:AsyncService) { }

  ngOnInit(): void {
  }
// 同步方法
  synchronousGet(){
    this.synchronousTextOut = this.asyncService.getData(this.synchronousTextIn);
  }
// 使用callback的方式接收异步处理结果
  asyncCallBackGet(){
    this.asyncService.getDataAsyncByCallback(this.asyncCallBackIn, (data:string) => {
      this.asyncCallBackOut = data;
    });
  }
// 使用Promise接收异步处理结果
  asyncPromiseGet() {
    var promise = this.asyncService.getDataAsyncByPromise(this.asyncPromiseIn, 2000);

    promise.then((out:string) => {
      this.asyncPromiseOut = out;
    })
  }
// 使用Rxjs的Observable接收异步处理结果
  asyncRxjsGet() {
    var observable = this.asyncService.getDataAsyncByRxjs(this.asyncRxjsIn, 3000);

    observable.subscribe((out:string) => {
      this.asyncRxjsOut = out;
    });
  }
}

// async-test.component.html

<h2>async-test</h2>
<div>
    <span>synchronous</span>
    <button (click)="synchronousGet()">synchronous-get</button>
    <input type="text" [(ngModel)]="synchronousTextIn" placeholder="in">
    <input type="text" [(ngModel)]="synchronousTextOut" placeholder="out" class="text-out" />
</div>

<br>

<div>
    <span>async-callback</span>
    <button (click)="asyncCallBackGet()">async-callback</button>
    <input type="text" [(ngModel)]="asyncCallBackIn" placeholder="in" />
    <input type="text" [(ngModel)]="asyncCallBackOut" placeholder="out" class="text-out" />
</div>

<br>

<div>
    <span>async-promise</span>
    <button (click)="asyncPromiseGet()">async-promise</button>
    <input type="text" [(ngModel)]="asyncPromiseIn" placeholder="in" />
    <input type="text" [(ngModel)]="asyncPromiseOut" placeholder="out" class="text-out" />
</div>

<br>

<div>
    <span>async-rxjs</span>
    <button (click)="asyncRxjsGet()">async-rxjs</button>
    <input type="text" [(ngModel)]="asyncRxjsIn" placeholder="in" />
    <input type="text" [(ngModel)]="asyncRxjsOut" placeholder="out" class="text-out" />
</div>

最后福利-AsyncService的单元测试.