为什么switchmap返回http响应,但map返回可观察到的

长矛

在此示例中,switchMap给出http响应,但是当使用map时,将返回Observable。我相信这与'flattening'switchMap确实有关,但是仍然不了解switchMap在幕后为产生http响应结果正在做什么。

import{Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { of, from, Observable, forkJoin } from 'rxjs';
import { map, mergeMap, switchMap, tap, flatMap} from 'rxjs/operators';
@Component({
  selector: 'star-wars',
  template: ``,
})
export class StarWars {
  private peopleUrl = 'https://swapi.co/api/people/';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    of(1)
    .pipe(
      map(() => this.http.get('https://swapi.co/api/people/1')),
      // produces Observable {_isScalar: false, source: {…}

      switchMap(() => this.http.get('https://swapi.co/api/people/1')),
      // produces http response {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond"…}
    )
    .subscribe(res => {
      console.log(res)
    })
  }
}

任何关于switchMap在这里做什么以产生这种不同结果的澄清将不胜感激。

m1ch4ls

Observables中的“扁平化”类似于您可能已经熟悉的扁平化数组的概念。

例如:

[[0], [1, 2], [3]].flatten()
// output [0, 1, 2, 3]

一般而言,展平意味着获取值的类型类型(例如,值的数组)并返回值的类型(例如,值的数组)。

类型的类型有时称为高阶类型(例如,高阶函数是函数返回函数,高阶Observable是Observable的Observable)。因此,展平会将高阶类型转换为一阶类型。

使用TypeScript编写flatten的函数具有以下签名:

flatten(source: Type<Type<Value>>): Type<Value>

在RxJS中,等效于flattenismergeAll运算符:

of(of(0), of(1, 2), of(3)).pipe(mergeAll())
// produce Observable<number> -> [0, 1, 2, 3]

经常将mapand组合使用,尽管名称可以不同,但​​主要概念是相同的-将映射和展平作为一个动作进行。flattenflatMap

在数组上下文中,而不是:

[0, 1, 2, 3].map(x => Array(x).fill(x)).flatten()
// [[], [1], [2, 2], [3, 3, 3]].flatten()
// output: [1, 2, 2, 3, 3, 3]

我们可以使用:

[0, 1, 2, 3].flatMap(x => Array(x).fill(x))

RxJS的许多运算符充当flatMap

  • mergeMap -同时将Observable展平,因此输入和输出值可能具有不同的顺序
  • concatMap -一次连续地将Observables一次展平,因此输入和输出值的顺序相同
  • switchMap -使“可观察”变平,但仅提供最新值

通常,这些flatMap类型的运算符将简单地调用subscribe从映射函数返回的Observable,并将为我们管理基础订阅。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从http请求返回可观察到的

HTTP可观察到的返回未定义/空

http.get()不返回可观察到的

返回可观察到的延期

从 eventListener 可观察到的角度返回

从异步函数返回可观察到的

返回可观察到的内部可观察到的可激活Angular 4防护

HTTP可观察到的响应解析为数组

试图找出异步返回可观察到的问题

可观察到的Redux:如何从回调返回操作?

如何从订阅中返回可观察到的

独立concat不返回可观察到的

可观察到的异步管道未返回值

如何从有前景的函数中返回可观察到的

从嵌套块返回最终可观察到的

保持可观察到的错误并返回所有值

为什么可以等待Rx可观察到的?

角度4,将http响应可观察到的转换为可观察对象

Nest JS-为返回可观察到的Axios响应的函数编写Jest测试用例的问题

使用switchMap发出可观察到的布尔热值?

SwitchMap具有可观察到的延迟

Angular HTTP可观察到的元组

当您进行返回可观察到的HTTP调用时,如何在Angular单元测试中使用fakesAync?

是什么导致可观察到的返回结果与在浏览器中显示结果之间的滞后?

从休息端点返回时,为什么渴望观察到的行为?

阻止所有http调用,直到观察到返回

为什么在返回一个简单数组时switchMap不需要可观察的对象

使用RxJS过滤单个值并返回可观察到的值,并通过Angular模板中的async使用可观察到的值

rxjs如何在角度服务中一起返回可观察到的值