角映射或mergeMap

Question

我有一个简单的JSON文件，它以格式返回一个对象数组：

[
    {
        "id": 1,
        "url": "file/abc.txt"
    },
    {
        "id": 2,
        "url": "file/def.txt"
    }
]

本人现正按以下方式使用本服务：

this.http.get("json-url")
.map((response) => response.json())
.filter((file) => file.id === 1)

什么都不管用。但是，如果我使用mergeMap，它可以正常工作。

this.http.get("api-url")
.mergeMap((response) => response.json())
.filter((file) => file.id === 1)

我以前使用过map操作符，它起了作用。然而，它在这里不起作用。如果我在使用map操作符时出错了，请告诉我。

请注意-我用的是角6。

Answer 1

如果您运行的是角6，建议使用HttpClient，因为不推荐使用Http。现在，由于您使用的是HttpClient，所以不需要在response上调用.json方法，因为这是HttpClient隐式处理的。

另外，由于Rxjs5.5或更高版本使用了Rxjs5.5，所以不能将map和pipe这样的运算符直接链接到Observable上。您必须对一个pipe值调用Observable函数，并向您添加由,分隔的操作符列表。

import { HttpClient } from '@angular/common/http';
import { map, filter } from 'rxjs/operators';

...

constructor(private http: HttpClient) {}

...

return this.http.get("json-url")
  .pipe(filter((file) => file.id === 1));

在这里，我返回Observable，这样我就可以从我调用的函数包装这段代码到它了。

要确保HttpClient正常工作，还必须在@NgModule文件中导入HttpClientModule并将其添加到imports数组中。

Answer 2

重要的是要在这里理解，this.http.get("json-url")返回一个可观察的。它不会被执行，直到你订阅。您必须订阅才能发送请求。

this.http.get("json-url") .map((response) => response.json()) .filter((file) => file.id === 1) .subscribe(theResultAfterMapAndFilter => console.log(theResultAfterMapAndFilter));

mergeMap工作的原因是它订阅了内部可观察到的源(如果我没有弄错的话)。

Answer 3

我有一个关于为什么map不能工作的答案，但我不完全确定为什么mergeMap是工作的。从response.json()返回的对象是任意列表。因此，filter应该处理完整的列表。而不是列表中的单个元素。该列表没有id属性，因此没有匹配。尽管filter中的参数称为file，但它应该是files。我相信以下内容将适用于地图：

this.http.get("json-url")
.map((response) => response.json())
.filter((files) => files.filter((file)->file.id === 1));

但是，你会得到一份名单。如果您真的想要一个文件，可以添加另一个映射：

this.http.get("json-url")
.map((response) => response.json())
.filter((files) => files.filter((file)->file.id === 1))
.map(files=> files[0]);

尽管如此，我认为mergeMap工作的原因可能是一些较老的rxjs怪癖。我未经证实的猜测是，从匿名函数返回的列表正在被mergeMap转换成可观察的列表。这听起来有点可疑，但可能是可能的。较早的rxjs似乎试图使事情运转，即使它可能不应该。