javascript - 如何等待可观察对象完成以返回值？

Question

我有一个功能如下。

 public getAssemblyTree(id: number) {
        ....
        const request = from(fetch(targetUrl.toString(), { headers: { 'responseType': 'json' }, method: 'GET' }));

        request.subscribe(
            (response) => {
                response.json().then(data => {
                    assemblyNodesForTree.push(...this.parseAssemblyTree(data['flat_assembly_graph']));
                }
                )
            }
        )
        console.log(assemblyNodesForTree)
        return assemblyNodesForTree;
    }

我意识到该函数正在返回 assemblyNodesForTree 而没有完成可观察的操作。我想知道解决这个问题的正确方法是什么？

Answer 1

您正在考虑以同步方式工作的异步操作。 另请参阅问题Problem returning value from RxJS Observable 。它解释了类似的用例。

---

Quick Suggestion:- use fromFetch instead of from(fetch)

为什么fromFetch？ - 因为它内部使用了fetch API，并在API调用完成后完成了observable。

您正在 getAssemblyTree 函数内进行订阅，ajax 完成后不久就会调用该函数。在此之前，您只需返回，而不是应该返回 assemblyNodesForTree 变量。那将永远是空的。

为了处理异步性质，您可以通过管道传输您的可观察量，并在 map 运算符函数内执行相关操作。最后从 getAssemblyTree 函数返回 Promise/Observable。

public getAssemblyTree(id: number) {
    ....
    const request = fromFetch({
      url: targetUrl.toString(), 
      headers: { 'responseType': 'json' }, method: 'GET' 
    }).pipe(
       map(async (response) => {
          const assemblyNodesForTree = [];
          const data = await response.json()
          assemblyNodesForTree.push(
            ...this.parseAssemblyTree(data['flat_assembly_graph'])
          );
          return assemblyNodesForTree;
       })
    );
    return request;
}

使用

async myFunction() {
  const assemblyNodesForTree = await lastValueFrom(getAssemblyTree(id))
}

此函数的使用非常简单，使用 lastValueFrom() 调用 getAssemblyTree(id) 函数包装器。一旦 fromFetch API 调用完成，它就会解决 promise 。