mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
356 lines
85 KiB
HTML
356 lines
85 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>RxJS 备忘清单
|
||
& rxjs cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="RxJS（Reactive Extensions for JavaScript）是一个强大的库，用于处理异步事件和数据流。以下是 RxJS 的一些关键概念、操作符和方法的总结。，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="rxjs,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</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="edit" 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.8.3"></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 xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 255 255">
|
||
<defs>
|
||
<linearGradient id="a" x1="11.935%" x2="62.881%" y1="90.18%" y2="37.177%">
|
||
<stop offset="0%" stop-color="#E01D84"></stop>
|
||
<stop offset="40.1%" stop-color="#DF1D85"></stop>
|
||
<stop offset="77%" stop-color="#932C87"></stop>
|
||
<stop offset="100%" stop-color="#5D2F88"></stop></linearGradient>
|
||
<linearGradient id="c" x1="-.146%" x2="99.946%" y1="49.99%" y2="49.99%">
|
||
<stop offset="0%" stop-color="#E01D84"></stop>
|
||
<stop offset="23.8%" stop-color="#DA1E85"></stop>
|
||
<stop offset="65.8%" stop-color="#C72085"></stop>
|
||
<stop offset="99.9%" stop-color="#B52284"></stop></linearGradient>
|
||
<radialGradient id="b" cx="77.558%" cy="33.251%" r="77.293%" fx="77.558%" fy="33.251%" gradientTransform="matrix(.7343 .0024 -.00176 1 .207 -.002)">
|
||
<stop offset="0%" stop-color="#E01D84"></stop>
|
||
<stop offset="13.9%" stop-color="#DE1E85"></stop>
|
||
<stop offset="28.5%" stop-color="#D62085"></stop>
|
||
<stop offset="43.4%" stop-color="#C92386"></stop>
|
||
<stop offset="58.6%" stop-color="#B72786"></stop>
|
||
<stop offset="73.9%" stop-color="#9D2B87"></stop>
|
||
<stop offset="89.1%" stop-color="#7C2E88"></stop>
|
||
<stop offset="100%" stop-color="#5D2F88"></stop></radialGradient></defs>
|
||
<g fill="none" transform="translate(1 2)">
|
||
<path fill="#E32286" d="M14.6140689,158.580855 C9.41406892,142.380855 7.91406892,125.280855 10.9140689,107.680855 C12.2140689,100.380855 14.2140689,93.3808546 16.4140689,86.2808546 C16.4140689,86.2808546 30.2140689,40.9808546 76.9140689,20.2808546 C76.9140689,20.2808546 93.0140689,11.7808546 117.214069,11.1808546 C117.214069,11.1808546 113.914069,7.98085459 111.814069,6.58085459 C100.414069,-1.01914541 83.4140689,-3.51914541 73.1140689,7.18085459 C70.0140689,10.3808546 67.4140689,13.8808546 64.5140689,17.0808546 C61.2140689,20.6808546 57.2140689,23.6808546 52.6140689,25.3808546 C48.6140689,26.8808546 44.6140689,26.5808546 40.5140689,27.2808546 C36.3140689,27.9808546 32.0140689,29.4808546 28.6140689,32.1808546 C24.9140689,35.1808546 23.4140689,39.1808546 23.0140689,43.7808546 C22.6140689,47.3808546 22.7140689,51.0808546 22.5140689,54.6808546 C22.0140689,65.2808546 18.6140689,68.2808546 11.0140689,74.1808546 C7.81406892,76.5808546 5.11406892,79.7808546 3.11406892,83.1808546 C-2.88593108,93.7808546 6.71406892,104.780855 7.21406892,115.480855 C7.31406892,117.680855 7.11406892,119.880855 6.31406892,121.980855 C5.51406892,124.280855 3.91406892,125.780855 2.61406892,127.680855 C0.814068923,130.180855 -0.385931077,133.180855 0.114068923,136.280855 C0.614068923,139.380855 2.21406892,142.280855 3.71406892,144.980855 C6.61406892,149.780855 10.2140689,154.080855 14.0140689,158.180855 C14.2140689,158.180855 14.4140689,158.380855 14.6140689,158.580855"></path>
|
||
<path fill="url(#a)" d="M205.414069,196.980855 C228.414069,186.980855 238.214069,169.680855 238.214069,169.680855 C259.714069,140.380855 252.414069,109.480855 252.414069,109.480855 C238.714069,139.280855 226.214069,147.480855 226.214069,147.480855 C259.914069,96.1808546 226.414069,65.1808546 226.414069,65.1808546 C240.114069,94.3808546 221.914069,129.980855 221.914069,129.980855 C206.614069,162.180855 184.914069,173.680855 184.914069,173.680855 C209.114069,178.180855 226.914069,161.880855 226.914069,161.880855 C192.214069,199.380855 154.614069,197.580855 154.614069,197.580855 C170.414069,215.280855 194.114069,213.780855 194.114069,213.780855 C163.114069,221.080855 134.014069,210.780855 110.114069,190.880855 C105.614069,187.180855 101.314069,183.180855 97.3140689,178.880855 C97.3140689,178.880855 93.7140689,175.080855 93.0140689,174.080855 L92.9140689,173.980855 C92.4140689,192.480855 111.714069,209.680855 111.714069,209.680855 C87.5140689,199.680855 76.4140689,177.980855 76.4140689,177.980855 C76.4140689,177.980855 60.1140689,150.180855 71.9140689,118.480855 C83.7140689,86.7808546 119.414069,79.9808546 119.414069,79.9808546 C148.914069,94.2808546 173.914069,98.7808546 173.914069,98.7808546 C226.614069,107.580855 223.614069,81.7808546 223.614069,81.7808546 C224.114069,59.5808546 190.614069,35.9808546 190.614069,35.9808546 C130.914069,-8.31914541 76.9140689,20.2808546 76.9140689,20.2808546 C30.2140689,40.9808546 16.4140689,86.2808546 16.4140689,86.2808546 C14.2140689,93.3808546 12.2140689,100.380855 10.9140689,107.680855 C5.81406892,137.380855 13.5140689,165.480855 30.2140689,190.480855 C56.2140689,229.280855 98.4140689,242.680855 98.4140689,242.680855 C160.914069,263.880855 203.614069,232.680855 203.614069,232.680855 C242.914069,205.680855 250.814069,174.480855 250.814069,174.480855 C219.114069,199.280855 205.414069,196.980855 205.414069,196.980855 Z M156.614069,51.0808546 C159.614069,51.0808546 162.014069,53.4808546 162.014069,56.4808546 C162.014069,59.4808546 159.614069,61.8808546 156.614069,61.8808546 C153.614069,61.8808546 151.214069,59.4808546 151.214069,56.4808546 C151.214069,53.4808546 153.614069,51.0808546 156.614069,51.0808546 Z"></path>
|
||
<path fill="url(#b)" d="M223.514069,81.6808546 C224.014069,59.4808546 190.514069,35.8808546 190.514069,35.8808546 C130.814069,-8.31914541 76.8140689,20.2808546 76.8140689,20.2808546 C30.1140689,40.9808546 16.3140689,86.2808546 16.3140689,86.2808546 C13.6140689,93.9808546 11.2140689,105.780855 11.2140689,105.780855 C8.31406892,120.580855 9.61406892,134.280855 9.61406892,134.280855 C10.8140689,147.380855 13.7140689,156.180855 13.7140689,156.180855 C16.7140689,165.580855 18.1140689,168.480855 18.1140689,168.480855 C18.0140689,168.180855 17.5140689,165.980855 17.5140689,165.980855 C17.5140689,165.980855 13.3140689,145.780855 17.2140689,126.380855 C17.2140689,126.380855 20.6140689,106.180855 34.4140689,90.5808546 C34.4140689,90.5808546 56.8140689,58.6808546 98.5140689,71.1808546 C98.5140689,71.1808546 107.514069,74.3808546 110.614069,75.9808546 C113.714069,77.4808546 119.114069,79.7808546 119.114069,79.7808546 C148.614069,94.0808546 173.614069,98.5808546 173.614069,98.5808546 C226.514069,107.480855 223.514069,81.6808546 223.514069,81.6808546 L223.514069,81.6808546 Z M156.614069,61.9808546 C153.614069,61.9808546 151.214069,59.5808546 151.214069,56.5808546 C151.214069,53.5808546 153.614069,51.1808546 156.614069,51.1808546 C159.614069,51.1808546 162.014069,53.5808546 162.014069,56.5808546 C162.014069,59.5808546 159.614069,61.9808546 156.614069,61.9808546 Z"></path>
|
||
<path fill="url(#c)" d="M122.414069,41.4808546 L88.3140689,30.8808546 C88.1140689,30.8808546 87.1140689,30.3808546 85.3140689,30.8808546 C85.3140689,30.8808546 65.2140689,35.9808546 68.7140689,46.9808546 C68.7140689,46.9808546 70.8140689,53.8808546 76.5140689,60.5808546 L114.014069,58.7808546 L122.414069,41.4808546 Z"></path></g>
|
||
</svg><a aria-hidden="true" tabindex="-1" href="#rxjs-备忘清单"><span class="icon icon-link"></span></a>RxJS 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://rxjs.dev/">RxJS</a>（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="#清晰">清晰</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#流">流</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#第一个示例">第一个示例</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">of</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#from">from</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#interval">interval</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fromevent">fromEvent</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">map</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#filter">filter</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#switchmap">switchMap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#mergemap">mergeMap</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#catcherror">catchError</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#debouncetime">debounceTime</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">take</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">combineLatest</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#concat">concat</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#merge">merge</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#forkjoin">forkJoin</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">retryWhen</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">startWith</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scan">scan</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#reduce">reduce</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#delay">delay</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="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 row-span-2"><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">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>RxJS 的强大之处在于它使用纯函数生成值的能力。这意味着您的代码更不容易出错。通常情况下，您会创建一个不纯的函数，而代码的其他部分可能会弄乱您的状态。</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</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 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 template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token operator">++</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> times</span><span class="token template-punctuation string">`</span></span><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></code></pre>
|
||
<p>使用 <code>RxJS</code> 可以隔离状态。</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> fromEvent<span class="token punctuation">,</span> scan <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><span class="code-line"><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">'click'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span><span class="token function">scan</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">count</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <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 parameter">count</span><span class="token punctuation">)</span> <span class="token arrow operator">=></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 template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> times</span><span class="token template-punctuation string">`</span></span><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></code></pre>
|
||
<p>扫描操作符的工作原理与数组的 <code>reduce</code> 类似。它接受一个暴露给回调函数的值。回调的返回值将成为下次回调运行时公开的下一个值。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><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">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p><code>RxJS</code> 拥有一整套运算符，可以帮助您控制事件如何流经您的可观察对象。这是使用纯 JavaScript 每秒最多允许一次点击的方式：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> rate <span class="token operator">=</span> <span class="token number">1000</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> lastClick <span class="token operator">=</span> <span class="token known-class-name class-name">Date</span><span class="token punctuation">.</span><span class="token method function property-access">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> rate<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</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 punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token known-class-name class-name">Date</span><span class="token punctuation">.</span><span class="token method function property-access">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> lastClick <span class="token operator">>=</span> rate<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 template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token operator">++</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">times</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> lastClick <span class="token operator">=</span> <span class="token known-class-name class-name">Date</span><span class="token punctuation">.</span><span class="token method function property-access">now</span><span class="token punctuation">(</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 class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用 RxJS：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> fromEvent<span class="token punctuation">,</span> throttleTime<span class="token punctuation">,</span> scan
|
||
</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'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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">'click'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span><span class="token function">throttleTime</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 function">scan</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">count</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> count <span class="token operator">+</span> <span class="token number">1</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><span class="code-line"> <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 parameter">count</span><span class="token punctuation">)</span> <span class="token arrow operator">=></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 template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> times</span><span class="token template-punctuation string">`</span></span><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></code></pre>
|
||
</div></div></div><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">
|
||
<p>通常情况下，您需要注册事件监听器。</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</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 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">'Clicked!'</span><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></code></pre>
|
||
<p>使用 <a href="https://rxjs.dev/">RxJS</a>，您可以创建一个可观察对象。</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><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><span class="code-line"><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">'click'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <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 class="token arrow operator">=></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">'Clicked!'</span><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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><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">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> map<span class="token punctuation">,</span> filter<span class="token punctuation">,</span> switchMap<span class="token punctuation">,</span> mergeMap<span class="token punctuation">,</span> catchError<span class="token punctuation">,</span> debounceTime<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> distinctUntilChanged<span class="token punctuation">,</span> take<span class="token punctuation">,</span> tap<span class="token punctuation">,</span> concatMap<span class="token punctuation">,</span> delay<span class="token punctuation">,</span> retryWhen<span class="token punctuation">,</span> scan<span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> combineLatest<span class="token punctuation">,</span> concat<span class="token punctuation">,</span> merge<span class="token punctuation">,</span> forkJoin<span class="token punctuation">,</span> withLatestFrom<span class="token punctuation">,</span> startWith<span class="token punctuation">,</span> 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"><a aria-hidden="true" tabindex="-1" href="#of"><span class="icon icon-link"></span></a>of</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>
|
||
<p>创建一个立即发送指定值并完成的 <code>Observable</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="from"><a aria-hidden="true" tabindex="-1" href="#from"><span class="icon icon-link"></span></a>from</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>
|
||
<p>从 Promise、数组、可迭代对象创建 <code>Observable</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="interval"><a aria-hidden="true" tabindex="-1" href="#interval"><span class="icon icon-link"></span></a>interval</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>
|
||
<p>创建一个定时发送递增整数的 <code>Observable</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="fromevent"><a aria-hidden="true" tabindex="-1" href="#fromevent"><span class="icon icon-link"></span></a>fromEvent</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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 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">'Button clicked!'</span><span class="token punctuation">,</span> event<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></code></pre>
|
||
<p>从 DOM 事件创建 <code>Observable</code></p>
|
||
</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"><a aria-hidden="true" tabindex="-1" href="#map"><span class="icon icon-link"></span></a>map</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>
|
||
<p>对 <code>Observable</code> 发出的每个值应用一个函数</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="filter"><a aria-hidden="true" tabindex="-1" href="#filter"><span class="icon icon-link"></span></a>filter</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>
|
||
<p>过滤 <code>Observable</code> 发出的值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switchmap"><a aria-hidden="true" tabindex="-1" href="#switchmap"><span class="icon icon-link"></span></a>switchMap</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">
|
||
</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>
|
||
<p>将 <code>Observable</code> 每个值映射成 <code>Observable</code> 并订阅，前一个订阅将被取消</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="mergemap"><a aria-hidden="true" tabindex="-1" href="#mergemap"><span class="icon icon-link"></span></a>mergeMap</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">
|
||
</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>
|
||
<p>类似 <code>switchMap</code>，但允许多个内部 <code>Observable</code> 并发执行</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="catcherror"><a aria-hidden="true" tabindex="-1" href="#catcherror"><span class="icon icon-link"></span></a>catchError</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">'发现一个错误：'</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 发现一个错误：Error!</span>
|
||
</span></code></pre>
|
||
<p>捕获 <code>Observable</code> 链中的错误</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="debouncetime"><a aria-hidden="true" tabindex="-1" href="#debouncetime"><span class="icon icon-link"></span></a>debounceTime</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><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span><span class="token function">debounceTime</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</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 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">'Mouse moved!'</span><span class="token punctuation">,</span> event<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></code></pre>
|
||
<p>延迟处理，直到源 <code>Observable</code> 停止发出数据一定时间</p>
|
||
</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>
|
||
<p>忽略连续重复的值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="take"><a aria-hidden="true" tabindex="-1" href="#take"><span class="icon icon-link"></span></a>take</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>
|
||
<p>只发出前 n 个值</p>
|
||
</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"><a aria-hidden="true" tabindex="-1" href="#combinelatest"><span class="icon icon-link"></span></a>combineLatest</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><span class="code-line"> <span class="token punctuation">[</span>obs1<span class="token punctuation">,</span> obs2<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">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>
|
||
<p>当两个 <code>Observable</code> 都发出新的值时，发出它们的组合</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="concat"><a aria-hidden="true" tabindex="-1" href="#concat"><span class="icon icon-link"></span></a>concat</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>
|
||
<p>按顺序连接多个 <code>Observable</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="merge"><a aria-hidden="true" tabindex="-1" href="#merge"><span class="icon icon-link"></span></a>merge</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><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 string">'A'</span> <span class="token operator">+</span> x<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 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><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 string">'B'</span> <span class="token operator">+</span> x<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 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>
|
||
<p>将多个 <code>Observable</code> 合并为一个</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="forkjoin"><a aria-hidden="true" tabindex="-1" href="#forkjoin"><span class="icon icon-link"></span></a>forkJoin</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>
|
||
<p>等待所有 <code>Observable</code> 完成，然后发出它们的最后一个值的数组</p>
|
||
</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 col-span-2"><div class="wrap-header h3wrap"><h3 id="retrywhen"><a aria-hidden="true" tabindex="-1" href="#retrywhen"><span class="icon icon-link"></span></a>retryWhen</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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">'出了些问题！'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <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 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 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">// 输出: 出了些问题！ (每秒重试一次)</span>
|
||
</span></code></pre>
|
||
<p>在 <code>Observable</code> 发出错误时重试</p>
|
||
</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, </span>
|
||
</span><span class="code-line"><span class="token comment">// After: 4, Before: 3, After: 6</span>
|
||
</span></code></pre>
|
||
<p>用于记录、测量或执行副作用操作</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="startwith"><a aria-hidden="true" tabindex="-1" href="#startwith"><span class="icon icon-link"></span></a>startWith</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>
|
||
<p>在 <code>Observable</code> 序列前添加值</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scan"><a aria-hidden="true" tabindex="-1" href="#scan"><span class="icon icon-link"></span></a>scan</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>
|
||
<p>对 <code>Observable</code> 发出的每个值应用累加器函数</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="reduce"><a aria-hidden="true" tabindex="-1" href="#reduce"><span class="icon icon-link"></span></a>reduce</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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 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 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>
|
||
<p>对 <code>Observable</code> 发出的值进行累加</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="delay"><a aria-hidden="true" tabindex="-1" href="#delay"><span class="icon icon-link"></span></a>delay</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 class="token function">delay</span><span class="token punctuation">(</span><span class="token number">2000</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">// 输出: 'Hello' (延迟2秒)</span>
|
||
</span></code></pre>
|
||
<p>延迟 <code>Observable</code> 发出数据的时间</p>
|
||
</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="调度器说明"><a aria-hidden="true" tabindex="-1" href="#调度器说明"><span class="icon icon-link"></span></a>调度器说明</h3><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><div class="wrap h3body-not-exist col-span-2"><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">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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 class="token function">observeOn</span><span class="token punctuation">(</span>asyncScheduler<span class="token punctuation">)</span><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.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" 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>
|