Angular2如何创建内部执行Observable的Promise？

嘿，这个场景我太熟悉了！结合你说的Component、ToolService、HttpService的依赖结构，我来给你一步步讲清楚怎么把HttpService返回的Observable包装成Promise，不管是内部执行还是对外暴露都能搞定～

1. 先修改ToolService的create方法 #

原来你是通过订阅Observable来处理数据和错误，现在我们可以用RxJS的toPromise()方法直接把Observable转成Promise，两种实现方式任你选：

方式1：返回Promise给Component处理结果 #

这种适合需要Component根据执行结果做后续操作的场景：

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';

@Injectable()
export class ToolService {
  constructor(private httpService: HttpService) {}

  create(data: any): Promise<any> {
    // 把HttpService的Observable转成Promise
    return this.httpService.create(data)
      .toPromise()
      .then(response => {
        // 这里写你原来在subscribe成功回调里的逻辑，比如格式化数据
        console.log('创建操作成功:', response);
        return response; // 把结果返回给调用的Component
      })
      .catch(error => {
        // 这里处理错误，比如打日志、给用户提示
        console.error('创建操作失败:', error);
        // 要是需要Component也捕获错误，就重新抛出
        throw error;
      });
  }
}

方式2：内部执行Promise，不返回给Component #

如果不需要Component知道执行结果，只想在ToolService内部默默处理：

// 还是在ToolService里
createInternal(data: any): void {
  this.httpService.create(data)
    .toPromise()
    .then(response => {
      // 内部处理成功逻辑，比如存到本地缓存
      console.log('内部创建完成:', response);
    })
    .catch(error => {
      // 内部处理错误，比如上报错误日志
      console.error('内部创建失败:', error);
    });
}

2. 在Component里调用ToolService #

如果用方式1返回Promise，Component里可以用两种写法：

写法1：用.then()/.catch()

import { Component } from '@angular/core';
import { ToolService } from './tool.service';

@Component({
  selector: 'app-root',
  template: '<button (click)="handleCreate()">点击创建</button>'
})
export class AppComponent {
  constructor(private toolService: ToolService) {}

  handleCreate() {
    const createData = { /* 你的请求数据 */ };
    this.toolService.create(createData)
      .then(result => {
        // Component层面的成功操作，比如弹提示、刷新列表
        alert('创建成功啦！');
      })
      .catch(error => {
        // Component层面的错误处理，比如给用户显示错误信息
        alert('哎呀，创建失败了，请重试');
      });
  }
}

写法2：用async/await（更简洁）

// 同样在Component里
async handleCreateAsync() {
  const createData = { /* 你的请求数据 */ };
  try {
    const result = await this.toolService.create(createData);
    alert('创建成功啦！');
  } catch (error) {
    alert('哎呀，创建失败了，请重试');
  }
}

几个要注意的点 #

• RxJS版本适配：Angular2对应的是RxJS5.x，toPromise()是Observable自带的方法，直接用就行。要是以后升级到RxJS6+，toPromise()会被废弃，那时候就用firstValueFrom或者lastValueFrom来替代，比如firstValueFrom(this.httpService.create(data))。
• 错误一定要处理：Promise的错误如果不捕获会变成未捕获异常，所以.catch()或者try/catch一定要写！
• 按需选择实现方式：根据业务需求选返回Promise还是内部执行，别瞎写冗余代码～

这样就能完美实现你想要的把Observable转成Promise执行的需求啦！

内容的提问来源于stack exchange，提问作者Maciej Wojcik