{"id":265,"date":"2026-09-25T10:28:45","date_gmt":"2026-09-25T02:28:45","guid":{"rendered":"https:\/\/yykcj.com\/?p=265"},"modified":"2026-09-25T10:28:45","modified_gmt":"2026-09-25T02:28:45","slug":"rxjs-%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bc%96%e7%a8%8b%e5%85%a5%e9%97%a8%ef%bc%9a%e4%bb%8e%e4%ba%8b%e4%bb%b6%e6%b5%81%e5%88%b0%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e7%9a%84%e5%ae%9e%e6%88%98%e6%8c%87","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=265","title":{"rendered":"RxJS \u54cd\u5e94\u5f0f\u7f16\u7a0b\u5165\u95e8\uff1a\u4ece\u4e8b\u4ef6\u6d41\u5230\u72b6\u6001\u7ba1\u7406\u7684\u5b9e\u6218\u6307\u5357"},"content":{"rendered":"<h2>\u4e3a\u4ec0\u4e48\u9700\u8981 RxJS\uff1f<\/h2>\n<p>\u4f5c\u4e3a\u524d\u7aef\u5f00\u53d1\u8005\uff0c\u6211\u4eec\u6bcf\u5929\u90fd\u5728\u5904\u7406\u5f02\u6b65\u4e8b\u4ef6\uff1a\u7528\u6237\u70b9\u51fb\u3001HTTP \u8bf7\u6c42\u3001\u5b9a\u65f6\u5668\u3001WebSocket \u6d88\u606f\u2026\u2026\u4f20\u7edf\u505a\u6cd5\u662f\u4f7f\u7528\u56de\u8c03\u6216 Promise\uff0c\u4f46\u5f53\u591a\u4e2a\u4e8b\u4ef6\u6e90\u9700\u8981\u7ec4\u5408\u3001\u8fc7\u6ee4\u3001\u8f6c\u6362\u65f6\uff0c\u4ee3\u7801\u4f1a\u8fc5\u901f\u53d8\u5f97\u96be\u4ee5\u7ef4\u62a4\u3002<\/p>\n<p>RxJS \u5c06\u4e00\u5207\u89c6\u4e3a<strong>\u53ef\u89c2\u5bdf\u7684\u6d41\uff08Observable\uff09<\/strong>\uff0c\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u64cd\u4f5c\u7b26\u6765\u58f0\u660e\u5f0f\u5730\u5904\u7406\u5f02\u6b65\u6570\u636e\u3002\u5b83\u4e0d\u4ec5\u80fd\u7b80\u5316\u590d\u6742\u903b\u8f91\uff0c\u8fd8\u80fd\u8f7b\u677e\u5b9e\u73b0\u9632\u6296\u3001\u8282\u6d41\u3001\u91cd\u8bd5\u3001\u7ade\u6001\u53d6\u6d88\u7b49\u9ad8\u7ea7\u529f\u80fd\u3002<\/p>\n<p>\u672c\u6587\u5c06\u901a\u8fc7\u4e00\u4e2a<strong>\u5b9e\u65f6\u641c\u7d22<\/strong>\u7684\u5b8c\u6574\u793a\u4f8b\uff0c\u5e26\u4f60\u4ece\u96f6\u4e0a\u624b RxJS\u3002<\/p>\n<h2>\u73af\u5883\u51c6\u5907<\/h2>\n<p>\u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee\u5e76\u5b89\u88c5 RxJS\uff1a<\/p>\n<pre><code class=\"language-bash\">\nmkdir rxjs-demo &amp;&amp; cd rxjs-demo\nnpm init -y\nnpm install rxjs\n<\/code><\/pre>\n<p>\u4e3a\u4e86\u8fd0\u884c\u793a\u4f8b\uff0c\u6211\u4eec\u4f7f\u7528 Node.js\uff08\u9700\u8981\u652f\u6301 ES Modules\uff09\u3002\u5728 <code>package.json<\/code> \u4e2d\u6dfb\u52a0 <code>\"type\": \"module\"<\/code>\u3002<\/p>\n<h2>\u6838\u5fc3\u6982\u5ff5\uff1aObservable\u3001Observer \u548c Subscription<\/h2>\n<p>Observable \u4ee3\u8868\u4e00\u4e2a\u53ef\u8c03\u7528\u7684\u672a\u6765\u503c\u6216\u4e8b\u4ef6\u7684\u96c6\u5408\u3002Observer \u662f\u4e00\u4e2a\u56de\u8c03\u96c6\u5408\uff0c\u77e5\u9053\u5982\u4f55\u76d1\u542c Observable \u53d1\u51fa\u7684\u503c\u3002Subscription \u8868\u793a Observable \u7684\u6267\u884c\uff0c\u4e3b\u8981\u7528\u4e8e\u53d6\u6d88\u6267\u884c\u3002<\/p>\n<p>\u8ba9\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 Observable\uff1a<\/p>\n<pre><code class=\"language-javascript\">\nimport { Observable } from &#x27;rxjs&#x27;;\n\nconst observable = new Observable(subscriber =&gt; {\n  subscriber.next(&#x27;Hello&#x27;);\n  subscriber.next(&#x27;RxJS&#x27;);\n  setTimeout(() =&gt; {\n    subscriber.next(&#x27;World&#x27;);\n    subscriber.complete();\n  }, 1000);\n});\n\nconst subscription = observable.subscribe({\n  next: value =&gt; console.log(value),\n  error: err =&gt; console.error(err),\n  complete: () =&gt; console.log(&#x27;\u5b8c\u6210&#x27;)\n});\n\n\/\/ \u53d6\u6d88\u8ba2\u9605\n\/\/ subscription.unsubscribe();\n<\/code><\/pre>\n<p>\u8f93\u51fa\u987a\u5e8f\uff1a<code>Hello<\/code>\u3001<code>RxJS<\/code>\uff0c1 \u79d2\u540e <code>World<\/code> \u548c <code>\u5b8c\u6210<\/code>\u3002<\/p>\n<p>> <strong>\u6ce8\u610f<\/strong>\uff1aObservable \u662f\u60f0\u6027\u7684\uff0c\u53ea\u6709\u88ab\u8ba2\u9605\u65f6\u624d\u4f1a\u6267\u884c\u3002\u6bcf\u6b21\u8ba2\u9605\u90fd\u4f1a\u91cd\u65b0\u6267\u884c\u751f\u4ea7\u8005\u51fd\u6570\u3002<\/p>\n<h2>\u521b\u5efa\u64cd\u4f5c\u7b26\uff1a\u4ece\u4e8b\u4ef6\u5230\u6d41<\/h2>\n<p>RxJS \u63d0\u4f9b\u4e86\u8bb8\u591a\u521b\u5efa\u64cd\u4f5c\u7b26\uff0c\u5982 <code>of<\/code>\u3001<code>from<\/code>\u3001<code>fromEvent<\/code>\u3001<code>interval<\/code> \u7b49\u3002<\/p>\n<pre><code class=\"language-javascript\">\nimport { of, from, fromEvent, interval } from &#x27;rxjs&#x27;;\nimport { take } from &#x27;rxjs\/operators&#x27;;\n\n\/\/ \u4ece\u6570\u7ec4\u521b\u5efa\nfrom([1, 2, 3]).subscribe(console.log);\n\n\/\/ \u4ece\u4e8b\u4ef6\u521b\u5efa\uff08\u6d4f\u89c8\u5668\u73af\u5883\uff09\n\/\/ const clicks = fromEvent(document, &#x27;click&#x27;);\n\/\/ clicks.subscribe(event =&gt; console.log(event));\n\n\/\/ \u5b9a\u65f6\u5668\uff0c\u53ea\u53d6\u524d 3 \u4e2a\u503c\ninterval(1000).pipe(take(3)).subscribe(console.log);\n<\/code><\/pre>\n<h2>\u7ba1\u9053\u64cd\u4f5c\u7b26\uff1a\u8f6c\u6362\u548c\u8fc7\u6ee4\u6d41<\/h2>\n<p>\u64cd\u4f5c\u7b26\u662f RxJS \u7684\u7075\u9b42\u3002\u5b83\u4eec\u901a\u8fc7 <code>pipe<\/code> \u65b9\u6cd5\u7ec4\u5408\uff0c\u6bcf\u4e2a\u64cd\u4f5c\u7b26\u63a5\u6536\u4e00\u4e2a Observable \u5e76\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 Observable\u3002<\/p>\n<p>\u5e38\u7528\u64cd\u4f5c\u7b26\uff1a<\/p>\n<ul>\n<li><code>map<\/code>\uff1a\u8f6c\u6362\u6bcf\u4e2a\u503c<\/li>\n<li><code>filter<\/code>\uff1a\u8fc7\u6ee4\u503c<\/li>\n<li><code>debounceTime<\/code>\uff1a\u9632\u6296<\/li>\n<li><code>distinctUntilChanged<\/code>\uff1a\u53bb\u9664\u8fde\u7eed\u91cd\u590d\u503c<\/li>\n<li><code>switchMap<\/code>\uff1a\u6620\u5c04\u4e3a\u65b0\u7684 Observable\uff0c\u5e76\u53d6\u6d88\u524d\u4e00\u4e2a<\/li>\n<\/ul>\n<p>\u793a\u4f8b\uff1a<\/p>\n<pre><code class=\"language-javascript\">\nimport { from } from &#x27;rxjs&#x27;;\nimport { map, filter } from &#x27;rxjs\/operators&#x27;;\n\nfrom([1, 2, 3, 4, 5])\n  .pipe(\n    filter(n =&gt; n % 2 === 0),\n    map(n =&gt; n * 10)\n  )\n  .subscribe(console.log); \/\/ 20, 40\n<\/code><\/pre>\n<h2>\u5b9e\u6218\uff1a\u5b9e\u73b0\u5b9e\u65f6\u641c\u7d22<\/h2>\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u8f93\u5165\u6846\uff0c\u7528\u6237\u8f93\u5165\u65f6\u89e6\u53d1\u641c\u7d22\u8bf7\u6c42\u3002\u6211\u4eec\u9700\u8981\uff1a<\/p>\n<ol>\n<li>\u76d1\u542c\u8f93\u5165\u4e8b\u4ef6<\/li>\n<li>\u9632\u6296\uff0c\u907f\u514d\u9891\u7e41\u8bf7\u6c42<\/li>\n<li>\u5ffd\u7565\u7a7a\u5b57\u7b26\u4e32<\/li>\n<li>\u53d6\u6d88\u524d\u4e00\u4e2a\u672a\u5b8c\u6210\u7684\u8bf7\u6c42\uff0c\u53ea\u4fdd\u7559\u6700\u65b0\u7ed3\u679c<\/li>\n<\/ol>\n<p>\u4f7f\u7528 RxJS \u53ef\u4ee5\u4f18\u96c5\u5730\u5b9e\u73b0\uff1a<\/p>\n<pre><code class=\"language-javascript\">\nimport { fromEvent, of } from &#x27;rxjs&#x27;;\nimport { debounceTime, map, distinctUntilChanged, filter, switchMap, catchError } from &#x27;rxjs\/operators&#x27;;\nimport { ajax } from &#x27;rxjs\/ajax&#x27;;\n\n\/\/ \u6a21\u62df\u8f93\u5165\u5143\u7d20\nconst input = document.createElement(&#x27;input&#x27;);\ndocument.body.appendChild(input);\n\nconst search$ = fromEvent(input, &#x27;input&#x27;).pipe(\n  map(event =&gt; event.target.value.trim()),\n  filter(query =&gt; query.length &gt; 0),\n  debounceTime(300),\n  distinctUntilChanged(),\n  switchMap(query =&gt;\n    ajax.getJSON(`\/api\/search?q=${query}`).pipe(\n      catchError(error =&gt; of({ error: true, message: error.message }))\n    )\n  )\n);\n\nsearch$.subscribe(result =&gt; {\n  console.log(&#x27;\u641c\u7d22\u7ed3\u679c:&#x27;, result);\n});\n<\/code><\/pre>\n<p><strong>\u5173\u952e\u70b9\u89e3\u6790<\/strong>\uff1a<\/p>\n<ul>\n<li><code>debounceTime(300)<\/code>\uff1a\u7528\u6237\u505c\u6b62\u8f93\u5165 300ms \u540e\u624d\u53d1\u51fa\u503c\u3002<\/li>\n<li><code>distinctUntilChanged()<\/code>\uff1a\u5982\u679c\u65b0\u503c\u4e0e\u4e0a\u4e00\u4e2a\u503c\u76f8\u540c\uff0c\u5219\u5ffd\u7565\u3002<\/li>\n<li><code>switchMap<\/code>\uff1a\u5c06\u67e5\u8be2\u5b57\u7b26\u4e32\u6620\u5c04\u4e3a HTTP \u8bf7\u6c42 Observable\uff0c\u5e76\u81ea\u52a8\u53d6\u6d88\u524d\u4e00\u4e2a\u8bf7\u6c42\uff0c\u89e3\u51b3\u7ade\u6001\u95ee\u9898\u3002<\/li>\n<li><code>catchError<\/code>\uff1a\u6355\u83b7\u9519\u8bef\uff0c\u8fd4\u56de\u4e00\u4e2a\u5b89\u5168\u7684 Observable\uff0c\u9632\u6b62\u6d41\u4e2d\u65ad\u3002<\/li>\n<\/ul>\n<p>> \ud83d\udca1 <strong>\u6700\u4f73\u5b9e\u8df5<\/strong>\uff1a\u59cb\u7ec8\u5728 <code>switchMap<\/code> \u5185\u90e8\u5904\u7406\u9519\u8bef\uff0c\u5426\u5219\u9519\u8bef\u4f1a\u4f20\u64ad\u5e76\u7ec8\u6b62\u6574\u4e2a\u6d41\u3002<\/p>\n<h2>\u5e38\u89c1\u5751\u4e0e\u89e3\u51b3\u65b9\u6848<\/h2>\n<h3>1. \u5fd8\u8bb0\u53d6\u6d88\u8ba2\u9605\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f<\/h3>\n<p>\u5728\u7ec4\u4ef6\u9500\u6bc1\u65f6\uff0c\u5fc5\u987b\u53d6\u6d88\u8ba2\u9605\u3002\u53ef\u4ee5\u4f7f\u7528 <code>takeUntil<\/code> \u64cd\u4f5c\u7b26\uff1a<\/p>\n<pre><code class=\"language-javascript\">\nimport { Subject } from &#x27;rxjs&#x27;;\nimport { takeUntil } from &#x27;rxjs\/operators&#x27;;\n\nconst destroy$ = new Subject();\n\nsomeObservable.pipe(takeUntil(destroy$)).subscribe(...);\n\n\/\/ \u7ec4\u4ef6\u9500\u6bc1\u65f6\ndestroy$.next();\ndestroy$.complete();\n<\/code><\/pre>\n<h3>2. \u9519\u8bef\u5904\u7406\u4e0d\u5f53<\/h3>\n<p>\u5982\u679c\u4e0d\u5728\u7ba1\u9053\u5185\u6355\u83b7\u9519\u8bef\uff0c\u9519\u8bef\u4f1a\u76f4\u63a5\u629b\u7ed9\u8ba2\u9605\u8005\u7684 error \u56de\u8c03\uff0c\u5e76\u4e14\u6d41\u4f1a\u7ec8\u6b62\u3002\u5bf9\u4e8e\u53ef\u80fd\u51fa\u9519\u7684\u8bf7\u6c42\uff0c\u52a1\u5fc5\u4f7f\u7528 <code>catchError<\/code> \u8fd4\u56de\u4e00\u4e2a\u5907\u7528 Observable\u3002<\/p>\n<h3>3. \u8fc7\u5ea6\u4f7f\u7528 RxJS<\/h3>\n<p>\u4e0d\u662f\u6240\u6709\u5f02\u6b65\u90fd\u9700\u8981 RxJS\u3002\u7b80\u5355\u7684 Promise \u94fe\u53ef\u80fd\u66f4\u76f4\u89c2\u3002RxJS \u9002\u5408\u5904\u7406<strong>\u591a\u4e2a\u4e8b\u4ef6\u6e90\u7684\u7ec4\u5408\u3001\u53d6\u6d88\u3001\u65f6\u95f4\u63a7\u5236<\/strong>\u7b49\u590d\u6742\u573a\u666f\u3002<\/p>\n<h2>\u4e0e React \u96c6\u6210<\/h2>\n<p>\u5728 React \u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 <code>useEffect<\/code> \u8ba2\u9605\u6d41\uff0c\u5e76\u5728\u6e05\u7406\u51fd\u6570\u4e2d\u53d6\u6d88\u8ba2\u9605\u3002<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useState, useEffect } from &#x27;react&#x27;;\nimport { fromEvent } from &#x27;rxjs&#x27;;\nimport { debounceTime, map, distinctUntilChanged } from &#x27;rxjs\/operators&#x27;;\n\nfunction SearchBox() {\n  const [results, setResults] = useState([]);\n\n  useEffect(() =&gt; {\n    const input = document.getElementById(&#x27;search&#x27;);\n    const subscription = fromEvent(input, &#x27;input&#x27;)\n      .pipe(\n        map(e =&gt; e.target.value),\n        debounceTime(300),\n        distinctUntilChanged()\n      )\n      .subscribe(query =&gt; {\n        \/\/ \u6a21\u62df\u641c\u7d22\n        fetch(`\/api\/search?q=${query}`)\n          .then(res =&gt; res.json())\n          .then(setResults);\n      });\n\n    return () =&gt; subscription.unsubscribe();\n  }, []);\n\n  return (\n    &lt;div&gt;\n      &lt;input id=&quot;search&quot; placeholder=&quot;\u641c\u7d22...&quot; \/&gt;\n      &lt;ul&gt;\n        {results.map(item =&gt; &lt;li key={item.id}&gt;{item.name}&lt;\/li&gt;)}\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<h2>\u603b\u7ed3<\/h2>\n<p>RxJS \u63d0\u4f9b\u4e86\u4e00\u79cd\u58f0\u660e\u5f0f\u7684\u65b9\u5f0f\u5904\u7406\u5f02\u6b65\u6d41\uff0c\u901a\u8fc7\u64cd\u4f5c\u7b26\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\u9632\u6296\u3001\u8282\u6d41\u3001\u7ade\u6001\u53d6\u6d88\u7b49\u590d\u6742\u903b\u8f91\u3002\u672c\u6587\u901a\u8fc7\u5b9e\u65f6\u641c\u7d22\u7684\u793a\u4f8b\uff0c\u5c55\u793a\u4e86\u6838\u5fc3\u6982\u5ff5\u548c\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n<p><strong>\u4e0b\u4e00\u6b65\u5b66\u4e60\u65b9\u5411<\/strong>\uff1a<\/p>\n<ul>\n<li>\u6df1\u5165\u5b66\u4e60\u9ad8\u9636\u64cd\u4f5c\u7b26\uff1a<code>mergeMap<\/code>\u3001<code>concatMap<\/code>\u3001<code>exhaustMap<\/code> \u7684\u533a\u522b\u4e0e\u4f7f\u7528\u573a\u666f\u3002<\/li>\n<li>\u638c\u63e1 Subjects\uff08<code>Subject<\/code>\u3001<code>BehaviorSubject<\/code>\u3001<code>ReplaySubject<\/code>\uff09\u7528\u4e8e\u591a\u64ad\u3002<\/li>\n<li>\u63a2\u7d22 RxJS \u5728\u72b6\u6001\u7ba1\u7406\uff08\u5982 NgRx\u3001Redux-Observable\uff09\u4e2d\u7684\u5e94\u7528\u3002<\/li>\n<\/ul>\n<p>\u5e0c\u671b\u8fd9\u7bc7\u6559\u7a0b\u80fd\u5e2e\u52a9\u4f60\u8fc8\u5165\u54cd\u5e94\u5f0f\u7f16\u7a0b\u7684\u5927\u95e8\u3002<\/p>\n<p>> <strong>\u5ef6\u4f38\u9605\u8bfb<\/strong>\uff1a > &#8211; <a href=\"https:\/\/rxjs.dev\/\">RxJS \u5b98\u65b9\u6587\u6863<\/a> > &#8211; <a href=\"https:\/\/www.learnrxjs.io\/\">Learn RxJS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u901a\u8fc7\u4e00\u4e2a\u5b9e\u65f6\u641c\u7d22\u7684\u5b9e\u4f8b\uff0c\u5e26\u4f60\u638c\u63e1 RxJS \u7684\u6838\u5fc3\u6982\u5ff5\u4e0e\u64cd\u4f5c\u7b26\uff0c\u5e76\u5206\u4eab\u9632\u6296\u3001\u7ade\u6001\u5904\u7406\u7b49\u6700\u4f73\u5b9e\u8df5\u3002\u4f60\u5c06\u5b66\u4f1a\u7528\u54cd\u5e94\u5f0f\u601d\u7ef4\u89e3\u51b3\u5f02\u6b65\u96be\u9898\uff0c\u5e76\u4e86\u89e3\u5982\u4f55\u4e0e React \u96c6\u6210\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[37,247,36,248,103],"class_list":["post-265","post","type-post","status-publish","format-standard","hentry","category-3","category-4","tag-javascript","tag-rxjs","tag-36","tag-248","tag-103"],"_links":{"self":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=265"}],"version-history":[{"count":0,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/265\/revisions"}],"wp:attachment":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}