javascript - Typescript Observables http.post 和 http.get 处理问题

Question

我正在从事一个项目，我正在使用 Angular( typescript )/Node 构建一个简单的前端来调用后端服务器来执行不同的任务。这些任务需要时间来执行，因此需要在后端服务器上排队。我按照以下教程解决了这个问题:https://github.com/realpython/flask-by-example一切似乎都很好。

现在我正在完成前端的工作，其中大部分代码已经使用 Angular 和 Rxjs 用 Typescript 编写。我正在尝试在 Typescript 中复制以下代码:

https://github.com/dimoreira/word-frequency/blob/master/static/main.js

此代码由两个函数组成，其中第一个函数“getModelSummary”(示例中的 getResults)通过以下方式调用 post 方法:

public getModelSummary(modelSummaryParameters: ModelSummaryParameters): Observable<ModelSummary> {

        return this.http.post(`${SERVER_URL}start`, modelSummaryParameters)
            .map(res => res.json())
            ;
    }

将作业放入队列并在后端服务器上为该函数分配一个作业 ID。第二个函数“listenModelSummary”，理想情况下应该在输入 jobId 的第一个函数之后立即执行，并在短时间内循环检查作业是否已完成:

public listenModelSummary(jobID: string) {

    return this.http.get(`${SERVER_URL}results/` + jobID).map(
        (res) => res.json()
    );
}

作业完成后，需要返回结果，这将更新前端。

我是 Typescript、Observables 和 rxjs 的新手，想问问正确的方法。我不想使用 javascript，但希望在我的前端代码堆栈中尽可能多地使用 Typescript。如何使用第一个函数调用第二个函数及其输出“jobID”，并让第二个函数通过间隔运行直到输出返回？

Answer 1

Observables 很棒，是 Angular 的 HttpClient 类返回的对象类型，但在我看来，有时处理它们比使用 promises 复杂得多。

是的，将 Observable 转换为 Promise 的额外操作对性能有轻微影响，但您会得到一个更简单的编程模型。

如果需要等待第一个函数完成，然后将返回值交给另一个函数，可以这样做:

async getModelSummary(modelSummaryParameters: ModelSummaryParameters): Promise<ModelSummary> {
  return this.http.post(`${SERVER_URL}start`, modelSummaryParameters).toPromise();
}

async doStuff(): Promise<void> {
  const modelSummary = await this.getModelSummary(params);

  // not sure if you need to assign this to your viewmodel,
  // what's returned, etc
  this.listenModelSummary(modelSummary)
}

如果你对使用 Observables 死心塌地，我会建议使用 concatMap 模式，它会是这样的:

doStuff(modelSummaryParameters: ModelSummaryParameters): Observable<ModelSummary> {
  return this.http
             .post(`${SERVER_URL}start`, modelSummaryParameters)
             .pipe(
               concatMap(modelSummary => <Observable<ModelSummary>> this.listenModelSummary(modelSummary))
             );
}

这是一篇关于 Observable 的不同映射解决方案的文章:https://blog.angularindepth.com/practical-rxjs-in-the-wild-requests-with-concatmap-vs-mergemap-vs-forkjoin-11e5b2efe293这可能会对您有所帮助。