angular - RXJS 对对象使用 ForkJoin

Question

我正在尝试使用 forkJoin 来运行一个带有键和值的对象数组，该值是可观察的。我需要将它设置为对象数组将导致键相同且值是 observable api 调用的结果的位置。这个对象可以有任意数量的键值对。我需要等到它们全部完成后才能继续。

如果我有:

{
  headerLogo: this.http.post(url, image),
  loginBackground: this.http.post(url2, image)
}

我需要它导致:

{
  headerLogo: resultOfApiCall
  loginBackgroud: resultOfApiCall2
}

我曾尝试使用 ForkJoin，但它似乎只需要一个包含可观察值的数组，而没有键。它们的键很重要，所以我知道什么 URL 与什么键对应，这样我就可以将它们保存在正确的位置。原始的 fork join 将返回一个对象数组，这些对象表示 api 调用的结果，但我不知道哪个属于哪个键。

对此有何想法？

Answer 1

来自 RxJS v6.5+ ，您可以使用字典(键值对)作为来源。
示例和 Stackblitz来自 Learn RxJS :

const { forkJoin } = rxjs;
const { ajax } = rxjs.ajax;

const jsonEditor = document.getElementById('json-editor');
const textContainer = document.getElementById('text-container');

const options = {};
const editor = new JSONEditor(jsonEditor, options);

/*
  when all observables complete, provide the last
  emitted value from each as dictionary
*/
forkJoin(
  // as of RxJS 6.5+ we can use a dictionary of sources
  {
    google: ajax.getJSON('https://api.github.com/users/google'),
    microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
    users: ajax.getJSON('https://api.github.com/users')
  }
)
.subscribe({
  next: (response) => editor.set(response),
  error: (error) => textContainer.innerHTML = error
});

<link href="https://unpkg.com/jsoneditor@9.4.1/dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/rxjs@6.5.0/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/jsoneditor@9.4.1/dist/jsoneditor-minimalist.min.js"></script>

<div id="json-editor" style="width: 600px; height: 400px;"></div>
<span id="text-container"></span>