mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-08-26 16:46:21 +08:00
71437ed638
Create a new cheat sheet for RxJS covering key concepts, operators, and methods. This includes installation, importing, creating Observables, and using various operators such as map, filter, switchMap, and more. The document also explains important concepts like Schedulers and provides examples for better understanding. 1013713630
249 lines
69 KiB
HTML
249 lines
69 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>RxJS 备忘清单
|
||
& rxjs cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="RxJS（Reactive Extensions for JavaScript）是一个强大的库，用于处理异步事件和数据流。以下是 RxJS 的一些关键概念、操作符和方法的总结。，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="rxjs,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
<link rel="stylesheet" href="../style/katex.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/rxjs.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.5.5"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="rxjs-备忘清单"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||
<path d="M107.946667 838.4l57.173333 23.893333v-385.28l-103.68 250.026667c-17.493333 43.52 3.413333 93.44 46.506667 111.36z m832-157.866667L728.32 169.813333a85.888 85.888 0 0 0-77.226667-52.48c-11.093333 0-22.613333 1.706667-33.706666 6.4L302.933333 253.866667a85.290667 85.290667 0 0 0-46.08 110.933333l211.626667 510.72a85.248 85.248 0 0 0 110.933333 46.08l314.026667-130.133333a85.077333 85.077333 0 0 0 46.506667-110.933334zM336.213333 373.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m-85.333333 469.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h61.866667l-147.2-355.84v270.506667z"></path>
|
||
</svg><a aria-hidden="true" tabindex="-1" href="#rxjs-备忘清单"><span class="icon icon-link"></span></a>RxJS 备忘清单</h1><div class="wrap-body">
|
||
<p>RxJS（Reactive Extensions for JavaScript）是一个强大的库，用于处理异步事件和数据流。以下是 RxJS 的一些关键概念、操作符和方法的总结。</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#安装-rxjs">安装 RxJS</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#导入所需的-observable-和操作符">导入所需的 Observable 和操作符</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#创建-observable">创建 Observable</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#of---创建一个立即发送指定值并完成的-observable">of - 创建一个立即发送指定值并完成的 Observable</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#from---从-promise数组可迭代对象创建-observable">from - 从 Promise、数组、可迭代对象创建 Observable</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#interval---创建一个定时发送递增整数的-observable">interval - 创建一个定时发送递增整数的 Observable</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fromevent---从-dom-事件创建-observable">fromEvent - 从 DOM 事件创建 Observable</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#操作符">操作符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#map---对-observable-发出的每个值应用一个函数">map - 对 Observable 发出的每个值应用一个函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#filter---过滤-observable-发出的值">filter - 过滤 Observable 发出的值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#switchmap---将-observable-每个值映射成-observable-并订阅前一个订阅将被取消">switchMap - 将 Observable 每个值映射成 Observable 并订阅，前一个订阅将被取消</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#mergemap---类似-switchmap但允许多个内部-observable-并发执行">mergeMap - 类似 switchMap，但允许多个内部 Observable 并发执行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#catcherror---捕获-observable-链中的错误">catchError - 捕获 Observable 链中的错误</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#debouncetime---延迟处理直到源-observable-停止发出数据一定时间">debounceTime - 延迟处理，直到源 Observable 停止发出数据一定时间</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#distinctuntilchanged---忽略连续重复的值">distinctUntilChanged - 忽略连续重复的值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#take---只发出前-n-个值">take - 只发出前 n 个值</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#组合操作符">组合操作符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#combinelatest---当两个-observable-都发出新的值时发出它们的组合">combineLatest - 当两个 Observable 都发出新的值时，发出它们的组合</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#concat---按顺序连接多个-observable">concat - 按顺序连接多个 Observable</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#merge---将多个-observable-合并为一个">merge - 将多个 Observable 合并为一个</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#forkjoin---等待所有-observable-完成然后发出它们的最后一个值的数组">forkJoin - 等待所有 Observable 完成，然后发出它们的最后一个值的数组</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#错误处理">错误处理</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#retrywhen---在-observable-发出错误时重试">retryWhen - 在 Observable 发出错误时重试</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#实用操作符">实用操作符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#tap---用于记录测量或执行副作用操作">tap - 用于记录、测量或执行副作用操作</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#startwith---在-observable-序列前添加值">startWith - 在 Observable 序列前添加值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scan---对-observable-发出的每个值应用累加器函数">scan - 对 Observable 发出的每个值应用累加器函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#reduce---对-observable-发出的值进行累加">reduce - 对 Observable 发出的值进行累加</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#delay---延迟-observable-发出数据的时间">delay - 延迟 Observable 发出数据的时间</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#调度器">调度器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#示例">示例</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装-rxjs"><a aria-hidden="true" tabindex="-1" href="#安装-rxjs"><span class="icon icon-link"></span></a>安装 RxJS</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> rxjs
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="导入所需的-observable-和操作符"><a aria-hidden="true" tabindex="-1" href="#导入所需的-observable-和操作符"><span class="icon icon-link"></span></a>导入所需的 Observable 和操作符</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Observable</span><span class="token punctuation">,</span> <span class="token keyword">of</span><span class="token punctuation">,</span> <span class="token keyword module">from</span><span class="token punctuation">,</span> interval<span class="token punctuation">,</span> fromEvent <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'rxjs'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> map<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> filter<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> switchMap<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> mergeMap<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> catchError<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> debounceTime<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> distinctUntilChanged<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> take<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> tap<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> concatMap<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> delay<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> retryWhen<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> scan<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> combineLatest<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> concat<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> merge<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> forkJoin<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> withLatestFrom<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> startWith<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> reduce
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'rxjs/operators'</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="创建-observable"><a aria-hidden="true" tabindex="-1" href="#创建-observable"><span class="icon icon-link"></span></a>创建 Observable</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="of---创建一个立即发送指定值并完成的-observable"><a aria-hidden="true" tabindex="-1" href="#of---创建一个立即发送指定值并完成的-observable"><span class="icon icon-link"></span></a>of - 创建一个立即发送指定值并完成的 Observable</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 1 2 3</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="from---从-promise数组可迭代对象创建-observable"><a aria-hidden="true" tabindex="-1" href="#from---从-promise数组可迭代对象创建-observable"><span class="icon icon-link"></span></a>from - 从 Promise、数组、可迭代对象创建 Observable</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword module">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 1 2 3</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="interval---创建一个定时发送递增整数的-observable"><a aria-hidden="true" tabindex="-1" href="#interval---创建一个定时发送递增整数的-observable"><span class="icon icon-link"></span></a>interval - 创建一个定时发送递增整数的 Observable</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 每秒输出一次递增的数字</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="fromevent---从-dom-事件创建-observable"><a aria-hidden="true" tabindex="-1" href="#fromevent---从-dom-事件创建-observable"><span class="icon icon-link"></span></a>fromEvent - 从 DOM 事件创建 Observable</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> button <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">fromEvent</span><span class="token punctuation">(</span>button<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token parameter">event</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Button clicked!'</span><span class="token punctuation">,</span> event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="操作符"><a aria-hidden="true" tabindex="-1" href="#操作符"><span class="icon icon-link"></span></a>操作符</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="map---对-observable-发出的每个值应用一个函数"><a aria-hidden="true" tabindex="-1" href="#map---对-observable-发出的每个值应用一个函数"><span class="icon icon-link"></span></a>map - 对 Observable 发出的每个值应用一个函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 2 4 6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="filter---过滤-observable-发出的值"><a aria-hidden="true" tabindex="-1" href="#filter---过滤-observable-发出的值"><span class="icon icon-link"></span></a>filter - 过滤 Observable 发出的值</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> x <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 2</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switchmap---将-observable-每个值映射成-observable-并订阅前一个订阅将被取消"><a aria-hidden="true" tabindex="-1" href="#switchmap---将-observable-每个值映射成-observable-并订阅前一个订阅将被取消"><span class="icon icon-link"></span></a>switchMap - 将 Observable 每个值映射成 Observable 并订阅，前一个订阅将被取消</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">switchMap</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 每秒输出一次 "Hello"</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="mergemap---类似-switchmap但允许多个内部-observable-并发执行"><a aria-hidden="true" tabindex="-1" href="#mergemap---类似-switchmap但允许多个内部-observable-并发执行"><span class="icon icon-link"></span></a>mergeMap - 类似 switchMap，但允许多个内部 Observable 并发执行</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">mergeMap</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 每秒输出一次 "Hello"</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="catcherror---捕获-observable-链中的错误"><a aria-hidden="true" tabindex="-1" href="#catcherror---捕获-observable-链中的错误"><span class="icon icon-link"></span></a>catchError - 捕获 Observable 链中的错误</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>x <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword control-flow">throw</span> <span class="token string">'Error!'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">catchError</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token arrow operator">=></span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token string">'Caught an error: '</span> <span class="token operator">+</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 1 Caught an error: Error!</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="debouncetime---延迟处理直到源-observable-停止发出数据一定时间"><a aria-hidden="true" tabindex="-1" href="#debouncetime---延迟处理直到源-observable-停止发出数据一定时间"><span class="icon icon-link"></span></a>debounceTime - 延迟处理，直到源 Observable 停止发出数据一定时间</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">fromEvent</span><span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">,</span> <span class="token string">'mousemove'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">debounceTime</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token parameter">event</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Mouse moved!'</span><span class="token punctuation">,</span> event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="distinctuntilchanged---忽略连续重复的值"><a aria-hidden="true" tabindex="-1" href="#distinctuntilchanged---忽略连续重复的值"><span class="icon icon-link"></span></a>distinctUntilChanged - 忽略连续重复的值</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">distinctUntilChanged</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 1 2 3</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="take---只发出前-n-个值"><a aria-hidden="true" tabindex="-1" href="#take---只发出前-n-个值"><span class="icon icon-link"></span></a>take - 只发出前 n 个值</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">take</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 0 1 2</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="组合操作符"><a aria-hidden="true" tabindex="-1" href="#组合操作符"><span class="icon icon-link"></span></a>组合操作符</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="combinelatest---当两个-observable-都发出新的值时发出它们的组合"><a aria-hidden="true" tabindex="-1" href="#combinelatest---当两个-observable-都发出新的值时发出它们的组合"><span class="icon icon-link"></span></a>combineLatest - 当两个 Observable 都发出新的值时，发出它们的组合</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs1 <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obs2 <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> combined <span class="token operator">=</span> <span class="token function">combineLatest</span><span class="token punctuation">(</span><span class="token punctuation">[</span>obs1<span class="token punctuation">,</span> obs2<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">combined<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 每秒输出一次两个 observables 的最新值</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="concat---按顺序连接多个-observable"><a aria-hidden="true" tabindex="-1" href="#concat---按顺序连接多个-observable"><span class="icon icon-link"></span></a>concat - 按顺序连接多个 Observable</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs1 <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obs2 <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> combined <span class="token operator">=</span> <span class="token function">concat</span><span class="token punctuation">(</span>obs1<span class="token punctuation">,</span> obs2<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">combined<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 1 2 3 4 5 6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="merge---将多个-observable-合并为一个"><a aria-hidden="true" tabindex="-1" href="#merge---将多个-observable-合并为一个"><span class="icon icon-link"></span></a>merge - 将多个 Observable 合并为一个</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs1 <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> <span class="token string">'A'</span> <span class="token operator">+</span> x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obs2 <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> <span class="token string">'B'</span> <span class="token operator">+</span> x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> combined <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>obs1<span class="token punctuation">,</span> obs2<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">combined<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 每秒输出 "A" 和 "B" 开头的递增数字</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="forkjoin---等待所有-observable-完成然后发出它们的最后一个值的数组"><a aria-hidden="true" tabindex="-1" href="#forkjoin---等待所有-observable-完成然后发出它们的最后一个值的数组"><span class="icon icon-link"></span></a>forkJoin - 等待所有 Observable 完成，然后发出它们的最后一个值的数组</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs1 <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obs2 <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> combined <span class="token operator">=</span> <span class="token function">forkJoin</span><span class="token punctuation">(</span><span class="token punctuation">[</span>obs1<span class="token punctuation">,</span> obs2<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">combined<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: [3, 'C']</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="错误处理"><a aria-hidden="true" tabindex="-1" href="#错误处理"><span class="icon icon-link"></span></a>错误处理</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="retrywhen---在-observable-发出错误时重试"><a aria-hidden="true" tabindex="-1" href="#retrywhen---在-observable-发出错误时重试"><span class="icon icon-link"></span></a>retryWhen - 在 Observable 发出错误时重试</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">throwError</span><span class="token punctuation">(</span><span class="token string">'Something went wrong!'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">retryWhen</span><span class="token punctuation">(</span><span class="token parameter">errors</span> <span class="token arrow operator">=></span>
|
||
</span><span class="code-line"> errors<span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">delayWhen</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">,</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">error</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: Something went wrong! (每秒重试一次)</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="实用操作符"><a aria-hidden="true" tabindex="-1" href="#实用操作符"><span class="icon icon-link"></span></a>实用操作符</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="tap---用于记录测量或执行副作用操作"><a aria-hidden="true" tabindex="-1" href="#tap---用于记录测量或执行副作用操作"><span class="icon icon-link"></span></a>tap - 用于记录、测量或执行副作用操作</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Before: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>x<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">After: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>x<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: Before: 1, After: 2, Before: 2, After: 4, Before: 3, After: 6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="startwith---在-observable-序列前添加值"><a aria-hidden="true" tabindex="-1" href="#startwith---在-observable-序列前添加值"><span class="icon icon-link"></span></a>startWith - 在 Observable 序列前添加值</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">startWith</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 0 1 2 3</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scan---对-observable-发出的每个值应用累加器函数"><a aria-hidden="true" tabindex="-1" href="#scan---对-observable-发出的每个值应用累加器函数"><span class="icon icon-link"></span></a>scan - 对 Observable 发出的每个值应用累加器函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">scan</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> acc <span class="token operator">+</span> value<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 1 3 6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="reduce---对-observable-发出的值进行累加"><a aria-hidden="true" tabindex="-1" href="#reduce---对-observable-发出的值进行累加"><span class="icon icon-link"></span></a>reduce - 对 Observable 发出的值进行累加</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> acc <span class="token operator">+</span> value<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="delay---延迟-observable-发出数据的时间"><a aria-hidden="true" tabindex="-1" href="#delay---延迟-observable-发出数据的时间"><span class="icon icon-link"></span></a>delay - 延迟 Observable 发出数据的时间</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: 'Hello' (延迟2秒)</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="调度器"><a aria-hidden="true" tabindex="-1" href="#调度器"><span class="icon icon-link"></span></a>调度器</h2><div class="wrap-body">
|
||
<p>调度器（Scheduler）控制着 RxJS 操作的执行时机。常见的调度器有：</p>
|
||
<ul>
|
||
<li><code>asyncScheduler</code>：异步执行任务。</li>
|
||
<li><code>queueScheduler</code>：按队列顺序执行任务。</li>
|
||
<li><code>animationFrameScheduler</code>：在浏览器的下一次重绘前执行任务。</li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="示例"><a aria-hidden="true" tabindex="-1" href="#示例"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token function">observeOn</span><span class="token punctuation">(</span>asyncScheduler<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Before subscribe'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obs<span class="token punctuation">.</span><span class="token method function property-access">subscribe</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'After subscribe'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 输出: Before subscribe, After subscribe, 1, 2, 3</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://rxjs.dev/">RxJS 官方文档</a></li>
|
||
<li><a href="https://rxjs.dev/guide/overview">RxJS 学习资源</a></li>
|
||
<li><a href="https://rxjs.dev/guide/operators">RxJS 操作符参考</a></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.5.5" defer></script><script src="../js/fuse.min.js?v=1.5.5" defer></script><script src="../js/main.js?v=1.5.5" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|