无需订阅调用类即可获取可观察的返回值

Question

在 TypeScript / Angular 中，您通常会调用一个返回可观察对象的函数并在组件中订阅它，如下所示：

this.productsService.getProduct().subscribe((product) => { this.product = product });

当代码在管理数据的类中运行时这很好，但我认为这不应该在组件中处理。我可能错了，但我认为组件的工作应该是请求和显示数据而不处理如何检索数据。

在 Angular 模板中，您可以这样做来订阅并显示可观察对象的结果：

<h1>{{ product.title | async }}</h1>

是否可以在组件类中有这样的东西？我的组件显示一个表单并在输入后检查日期是否有效。提交表单被阻止，直到值有效并且我想将它背后的所有逻辑保留在应该订阅 AJAX 调用的服务中，组件只检查它是否有一个有效的日期。

 class FormComponent {
    datechangeCallback(date) {
        this.dateIsValid$ = this.dateService.checkDate(date);
    }

    submit() {
        if (this.dateIsValid$ === true) {
            // handle form submission...
        }
    }
}

Answer 1

您可以将 rxjs Observables 转换为 ES6 Promises，然后使用 async-await 语法来获取无需订阅 observable 的数据。

服务：

export class DateService {
  constructor(private http: HttpClient) {}

  async isDateValid(date): Promise<boolean> {
    let data = await this.http.post(url, date, httpOptions).toPromise();
    let isValid: boolean;
    // perform your validation and logic below and store the result in isValid variable
    return isValid;
  }
}

组件：

class FormComponent {
    async datechangeCallback(date) {
        this.dateIsValid = await this.dateService.isDateValid(date);
    }

    submit() {
        if (this.dateIsValid) {
            // handle form submission...
        }
    }
}

附注：

如果这是一个简单的 HTTP 请求，它在接收到一个值时完成，那么使用 Promises 不会有什么坏处。但是如果这个 observable 产生了一些连续的值流，那么使用 Promises 并不是最好的解决方案，你必须恢复到 rxjs observables。