RxJs 之 switchMap 学习

crary,记忆

于 2024-11-17 09:00:00 发布

阅读量1.1k

点赞数 27

分类专栏：前端知识总结文章标签：学习 javascript angular 前端

本文链接：https://blog.youkuaiyun.com/qq_44327851/article/details/143803293

版权

前端知识总结专栏收录该内容

78 篇文章

订阅专栏

之前我有对节流和防抖进行了简单的学习，尤其是在Angular中防抖对和节流的学习中，有了解到RxJs中的switchMap操作符，它是一个防抖和节流很好的辅助。

Rxjs和防抖，节流的知识点复习：

RxJS-----RxJS简介
防抖和节流-------防抖和节流的简介
Angular中的防抖和节流--------Angular中如何实现防抖和节流

接着，让我们进入正题：switchMap操作符的学习：

switchMap操作符常用于处理和转换数据流。它的特点是在源 observable 发出新值时，会取消并切换到新的 inner observable（内部可观察对象），因此非常适合处理只关心最新数据的场景。

`switchMap` 是做什么的？

switchMap是一个映射操作符，它接收源 observable 发出的值，并基于该值返回一个新的 observable。与其它映射操作符不同的是，switchMap在源 observable 发出新值时，会取消当前正在执行的内部 observable，订阅新的 observable。

这使得 switchMap 在以下情况中非常有用：

当你只关心最新的请求或结果。
在请求中，如果新的请求到达时取消掉当前的请求（比如搜索建议、实时数据过滤等）。

`switchMap` 的工作流程：

源 observable 发出一个值。
switchMap将源值映射到一个新的 observable，并订阅它。
如果源 observable 再次发出新的值，switchMap会取消当前订阅的 inner observable，并订阅新的 inner observable。

关键点：

切换到新的 observable。
取消当前正在进行的 inner observable。
适用于你只关心最新发出的值，并且需要丢弃之前的值（比如搜索框、实时数据等）。

使用场景：

搜索输入框：用户输入时，取消当前的 HTTP 请求，发起新的请求获取最新的数据。
实时数据：例如实时股票数据、天气更新等，只关心最新的值，不需要处理旧的值。

总结：

switchMap 主要用来处理连续的、异步的数据流，确保只处理最新的请求或事件，避免了不必要的请求或操作。在需要取消上一个操作并只关注最后一次结果时，switchMap 是一个非常有用的工具。

完整示例：

下面是一个使用 switchMap 的简单示例，假设我们在实现一个搜索功能，每次输入框内容变化时发出一个请求。

import { of, fromEvent } from 'rxjs';
import { switchMap, debounceTime, map, distinctUntilChanged } from 'rxjs/operators';

// 模拟 HTTP 请求
const simulatedHttpRequest = (query) => {
  console.log(`发起请求：${query}`);
  return of(`查询结果: ${query}`);
};

// 获取搜索框输入事件
const searchInput = fromEvent(document.getElementById('searchBox'), 'input');

searchInput.pipe(
  debounceTime(300), // 等待 300 毫秒，防止用户快速输入时发起多个请求
  map(event => event.target.value), // 获取输入框的值
  distinctUntilChanged(), // 如果输入值没有变化，就不发起新的请求
  switchMap(query => simulatedHttpRequest(query)) // 取消上一个请求，发起新的请求
)
.subscribe(response => {
  console.log(response); // 输出查询结果
});