Une brève discussion sur la façon dont RxJS mappe les opérations de données dans Angular-js tutoriel-php.cn

Une brève discussion sur la façon dont RxJS mappe les opérations de données dans Angular

Carte Les données sont une opération courante lors du développement d'un programme. Lorsque vous utilisez RxJS pour générer des flux de données dans le code, vous aurez probablement besoin d'un moyen de mapper les données dans le format nécessaire. RxJS fournit les fonctions map habituelles, ainsi que mergeMap, switchMap et concatMap Ces fonctions sont gérées légèrement différemment. [Tutoriels associés recommandés : "tutoriel angulaire"]Map 数据是程序开发时的一种常见操作。当在代码中使用RxJS来生成数据流时，很可能最终需要一种方法来将数据映射成需要的任何格式。RxJS提供了常规的 map 函数，还有 mergeMap、switchMap和concatMap这样的函数，它们的处理方式略有不同。【相关教程推荐：《angular教程》】

map

map操作符是最常见的。对于Observable发出的每个值，都可以应用一个函数来修改数据。返回值将在后台被重新释放为Observable，这样就可以在流中继续使用它。它的工作原理与在数组中使用它的方法非常相似。

不同之处在于，数组将始终只是数组，而在映射时，将获得数组中当前的索引值。对于observable，数据的类型可以是各种类型。这意味着可能需要在 Observable map 函数中做一些额外的操作来获得想要的结果。看下面的例子：:

import { of } from "rxjs";
import { map } from "rxjs/operators";

// 创建数据
const data = of([
    {
        brand: "保时捷",
        model: "911"
    },
    {
        brand: "保时捷",
        model: "macan"
    },
    {
        brand: "法拉利",
        model: "458"
    },
    {
        brand: "兰博基尼",
        model: "urus"
    }
]);

// 按照brand model的格式输出，结果：["保时捷 911", "保时捷 macan", "法拉利 458", "兰博基尼 urus"]
data.pipe(map(cars => cars.map(car => `${car.brand} ${car.model}`))).subscribe(cars => console.log(cars));

// 过滤数据，只保留brand为porsche的数据，结果：[{"brand":"保时捷","model":"911"},{"brand":"保时捷","model":"macan"}]
data.pipe(map(cars => cars.filter(car => car.brand === "保时捷"))).subscribe(cars => console.log(cars));

Copier après la connexion

首先用一系列汽车创建了可观察对象。然后订阅这个可观测值2次。

第一次修改数据时，得到了一个由brand和model字符串连接起来的数组。
第二次修改数据时，得到了一个只有brand为保时捷的数组。

在这两个例子中，使用Observable map操作符来修改由Observable发出的数据。返回修改的结果，然后map操作符将结果封装到一个可观察对象中，以便后面可以subscribe。

MergeMap

现在假设有这样一个场景，有一个可观察到的对象，它发出一个数组，对于数组中的每一项，都需要从服务器获取数据。

可以通过订阅数组来做到这一点，然后设置一个映射来调用一个处理API调用的函数，订阅其结果。如下：

import { of, from } from "rxjs";
import { map, delay } from "rxjs/operators";

const getData = param => {
    return of(`检索参数： ${param}`).pipe(delay(1000));
};

from([1, 2, 3, 4])
    .pipe(map(param => getData(param)))
    .subscribe(val => console.log(val));

Copier après la connexion

map函数返回getData函数的值。在这种情况下，这是可观测的。但这产生了一个问题：因为现在要处理一个额外的可观测值。

为了进一步阐明这一点：from([1,2,3,4])作为“外部”可观察对象，getData()的结果作为“内部”可观察对象。从理论上讲，必须同时接受外部和内部的可观测数据。可以是这样的：

import { of, from } from "rxjs";
import { map, delay } from "rxjs/operators";

const getData = param => {
    return of(`检索参数： ${param}`).pipe(delay(1000));
};

from([1, 2, 3, 4])
    .pipe(map(param => getData(param)))
    .subscribe(val => val.subscribe(data => console.log(data)));

Copier après la connexion

可以想象，这与必须调用Subscribe两次的理想情况相去甚远。这就是mergeMap发挥作用的地方。MergeMap本质上是mergeAll和map的组合。MergeAll负责订阅“内部”可观察对象，当MergeAll将“内部”可观察对象的值合并为“外部”可观察对象时，不再需要订阅两次。如下：

import { of, from } from "rxjs";
import { map, delay, mergeAll } from "rxjs/operators";

const getData = param => {
    return of(`检索参数： ${param}`).pipe(delay(1000));
};

from([1, 2, 3, 4])
    .pipe(
        map(param => getData(param)),
        mergeAll()
    )
    .subscribe(val => console.log(val));

Copier après la connexion

这已经好多了，mergeMap将是这个问题的最佳解决方案。下面是完整的例子：

import { of, from } from "rxjs";
import { map, mergeMap, delay, mergeAll } from "rxjs/operators";

const getData = param => {
    return of(`检索参数： ${param}`).pipe(delay(1000));
};

// 使用 map
from([1, 2, 3, 4])
    .pipe(map(param => getData(param)))
    .subscribe(val => val.subscribe(data => console.log(data)));

// 使用 map 和 mergeAll
from([1, 2, 3, 4])
    .pipe(
        map(param => getData(param)),
        mergeAll()
    )
    .subscribe(val => console.log(val));

// 使用 mergeMap
from([1, 2, 3, 4])
    .pipe(mergeMap(param => getData(param)))
    .subscribe(val => console.log(val));

Copier après la connexion

SwitchMap

SwitchMap具有类似的行为，它也将订阅内部可观察对象。然而，switchMap是switchAll和map的组合。SwitchAll取消先前的订阅并订阅新订阅。在上面的场景中，想要为“外部”可观察对象数组中的每一项执行API调用，但switchMap并不能很好地工作，因为它将取消前3个订阅，只处理最后一个订阅。这意味着只会得到一个结果。完整的例子可以在这里看到：

import { of, from } from "rxjs";
import { map, delay, switchAll, switchMap } from "rxjs/operators";

const getData = param => {
    return of(`retrieved new data with param ${param}`).pipe(delay(1000));
};

// 使用 a regular map
from([1, 2, 3, 4])
    .pipe(map(param => getData(param)))
    .subscribe(val => val.subscribe(data => console.log(data)));

// 使用 map and switchAll
from([1, 2, 3, 4])
    .pipe(
        map(param => getData(param)),
        switchAll()
    )
    .subscribe(val => console.log(val));

// 使用 switchMap
from([1, 2, 3, 4])
    .pipe(switchMap(param => getData(param)))
    .subscribe(val => console.log(val));

Copier après la connexion

虽然switchMap不适用于当前的场景，但它适用于其他场景。例如，如果将筛选器列表组合到数据流中，并在更改筛选器时执行API调用，那么它将派上用场。如果先前的筛选器更改仍在处理中，而新的更改已经完成，那么它将取消先前的订阅，并在最新的更改上启动新的订阅。这里可以看到一个例子：

import { of, from, BehaviorSubject } from "rxjs";
import { map, delay, switchAll, switchMap } from "rxjs/operators";

const filters = ["brand=porsche", "model=911", "horsepower=389", "color=red"];
const activeFilters = new BehaviorSubject("");

const getData = params => {
    return of(`接收参数： ${params}`).pipe(delay(1000));
};

const applyFilters = () => {
    filters.forEach((filter, index) => {
        let newFilters = activeFilters.value;
        if (index === 0) {
            newFilters = `?${filter}`;
        } else {
            newFilters = `${newFilters}&${filter}`;
        }

        activeFilters.next(newFilters);
    });
};

// 使用 switchMap
activeFilters.pipe(switchMap(param => getData(param))).subscribe(val => console.log(val));

applyFilters();

Copier après la connexion

正如在控制台中看到的，getData只记录一次所有参数。节省了3次API的调用。

ConcatMap

最后一个例子是concatMap。concatMap订阅了内部可观察对象。但与switchMap不同的是，如果有一个新的观察对象进来，它将取消当前观察对象的订阅，concatMap

map

L'opérateur map est le plus courant. Pour chaque valeur émise par un Observable, une fonction peut être appliquée pour modifier les données. La valeur de retour sera libérée en tant que Observable en arrière-plan afin qu'elle puisse continuer à être utilisée dans le flux. Cela fonctionne de manière très similaire à son utilisation avec un tableau. 🎜🎜La différence est qu'un tableau sera toujours juste un tableau, alors que lors du mappage, vous obtiendrez la valeur d'index actuelle dans le tableau. Pour observable, le type de données peut être de différents types. Cela signifie que vous devrez peut-être effectuer quelques opérations supplémentaires dans la fonction Carte observable pour obtenir les résultats souhaités. Regardez l'exemple ci-dessous : 🎜

import { of, from } from "rxjs";
import { map, delay, mergeMap, concatMap } from "rxjs/operators";

const getData = param => {
    const delayTime = Math.floor(Math.random() * 10000) + 1;
    return of(`接收参数： ${param} and delay: ${delayTime}`).pipe(delay(delayTime));
};

// 使用map
from([1, 2, 3, 4])
    .pipe(map(param => getData(param)))
    .subscribe(val => val.subscribe(data => console.log("map:", data)));

// 使用mergeMap
from([1, 2, 3, 4])
    .pipe(mergeMap(param => getData(param)))
    .subscribe(val => console.log("mergeMap:", val));

// 使用concatMap
from([1, 2, 3, 4])
    .pipe(concatMap(param => getData(param)))
    .subscribe(val => console.log("concatMap:", val));

Copier après la connexion

🎜Crée d'abord un observable avec une série de voitures. Alors abonnez-vous à cet observable 2 fois. 🎜

🎜Lorsque j'ai modifié les données pour la première fois, j'ai obtenu une chaîne composée de brand et model< /code> tableaux concaténés. 🎜</li><li>🎜Lorsque j'ai modifié les données pour la deuxième fois, j'ai obtenu un tableau avec uniquement <code>marque étant Porsche. 🎜

🎜Dans les deux exemples, utilisez l'opérateur cartographique Observable pour modifier les données émises par Observable. Le résultat modifié est renvoyé et l'opérateur map encapsule le résultat dans un objet observable afin qu'il puisse être subscribe ultérieurement. 🎜

MergeMap

🎜Supposons maintenant qu'il existe un scénario dans lequel il existe un objet observable qui émet un tableau, pour le Pour chaque élément, les données doit être obtenu auprès du serveur. 🎜🎜 Vous pouvez le faire en vous abonnant à un tableau, puis en configurant une carte pour appeler une fonction qui gère l'appel API, en vous abonnant à ses résultats. Comme suit : 🎜rrreee🎜 La fonction map renvoie la valeur de la fonction getData. Dans ce cas, c'est observable. Mais cela crée un problème : nous avons désormais un observable supplémentaire à gérer. 🎜🎜Pour clarifier cela davantage : from([1,2,3,4]) comme observable "externe", le résultat de getData() comme observable "interne" " "Objet observable. En théorie, les observables externes et internes doivent être acceptés. Cela pourrait ressembler à ceci : 🎜rrreee🎜Comme vous pouvez l'imaginer, c'est loin d'être la situation idéale consistant à devoir appeler Subscribe deux fois. C'est là que mergeMap entre en jeu. MergeMap est essentiellement une combinaison de mergeAll et map. MergeAll est responsable de l'abonnement à l'objet observable "interne". Lorsque MergeAll fusionne les valeurs de l'objet observable "interne" dans l'objet observable "externe", là. il n'est pas nécessaire de souscrire à deux Second-rate. Comme suit : 🎜rrreee🎜C'est bien mieux, mergeMap sera la meilleure solution à ce problème. Voici l'exemple complet : 🎜rrreee

SwitchMap

🎜SwitchMap a un comportement similaire, il s'abonnera également Interne observables. Cependant, switchMap est une combinaison de switchAll et map. SwitchAllAnnule l'abonnement précédent et souscrit au nouveau. Dans le scénario ci-dessus, on souhaite effectuer un appel API pour chaque élément du tableau observable "externe", mais switchMap ne fonctionne pas très bien car il annulera les 3 premiers abonnements, uniquement le dernier. la souscription est traitée. Cela signifie qu'un seul résultat sera obtenu. L'exemple complet peut être vu ici : 🎜rrreee🎜Bien que switchMap ne fonctionne pas pour le scénario actuel, il fonctionne pour d'autres scénarios. Cela s'avérerait utile, par exemple, si vous combinez une liste de filtres dans un flux de données et effectuez un appel API lorsque le filtre est modifié. Si le changement de filtre précédent est toujours en cours de traitement et que le nouveau changement a été effectué, l'abonnement précédent sera annulé et un nouveau sera lancé avec le dernier changement. Un exemple peut être vu ici : 🎜rrreee🎜Comme on le voit dans la console, getData enregistre tous les paramètres une seule fois. Enregistrement de 3 appels API. 🎜

ConcatMap

🎜Le dernier exemple est concatMap. concatMap s'abonne à l'observable interne. Mais contrairement à switchMap, si un nouvel objet d'observation arrive, il annulera l'abonnement de l'objet d'observation actuel. concatMap ne s'abonnera pas tant que l'objet d'observation actuel n'est pas terminé. objet d'observation. L’avantage est que l’ordre dans lequel les objets observables émettent des signaux est conservé. Pour le démontrer : 🎜

import { of, from } from "rxjs";
import { map, delay, mergeMap, concatMap } from "rxjs/operators";

const getData = param => {
    const delayTime = Math.floor(Math.random() * 10000) + 1;
    return of(`接收参数： ${param} and delay: ${delayTime}`).pipe(delay(delayTime));
};

// 使用map
from([1, 2, 3, 4])
    .pipe(map(param => getData(param)))
    .subscribe(val => val.subscribe(data => console.log("map:", data)));

// 使用mergeMap
from([1, 2, 3, 4])
    .pipe(mergeMap(param => getData(param)))
    .subscribe(val => console.log("mergeMap:", val));

// 使用concatMap
from([1, 2, 3, 4])
    .pipe(concatMap(param => getData(param)))
    .subscribe(val => console.log("concatMap:", val));

Copier après la connexion

getData函数的随机延迟在1到10000毫秒之间。通过浏览器日志，可以看到map和mergeMap操作符将记录返回的任何值，而不遵循原始顺序。concatMap记录的值与它们开始时的值相同。

总结

将数据映射到所需的格式是一项常见的任务。RxJS附带了一些非常简洁的操作符，可以很好的完成这项工作。

概括一下：map用于将normal值映射为所需的任何格式。返回值将再次包装在一个可观察对象中，因此可以在数据流中继续使用它。当必须处理一个“内部”观察对象时，使用mergeMap、switchMap或concatMap更容易。如果只是想将数据转成Observable对象，使用mergeMap；如果需要丢弃旧的Observable对象，保留最新的Observable对象，使用switchMap；如果需要将数据转成Observable对象，并且需要保持顺序，则使用concatMap。

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!