Угловая карта или карта слияния

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

У меня есть ответ, почему 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.Это кажется немного подозрительным, но возможно.Более старый API rxjs, казалось, пытался заставить вещи работать, даже если это, вероятно, не должно.

Answer 2

Если вы используете Angular 6, действительно рекомендуется использовать HttpClient, поскольку Http не рекомендуется.Теперь, поскольку вы будете использовать HttpClient, вам не нужно будет вызывать метод .json для response, поскольку это то, о чем HttpClient заботится неявно.

Кроме того, начиная с Angular 6использует Rxjs 5.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, чтобы я мог subscribe к нему из того места, где я вызываю функцию, обертывающую этот фрагмент кода.

Чтобы убедиться, что HttpClient работает правильно, вы такженеобходимо импортировать HttpClientModule в ваш файл @NgModule и добавить его в массив imports.

Answer 3

Важно понимать, что 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, заключается в том, что он подписывается на источник, наблюдаемый внутри (если я не ошибаюсь).