{"id":266,"date":"2026-09-26T10:31:55","date_gmt":"2026-09-26T02:31:55","guid":{"rendered":"https:\/\/yykcj.com\/?p=266"},"modified":"2026-09-26T10:31:55","modified_gmt":"2026-09-26T02:31:55","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-2","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=266","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":"

\u4e3a\u4ec0\u4e48\u4f60\u9700\u8981 RxJS\uff1f<\/h2>\n

\u5982\u679c\u4f60\u66fe\u7528 addEventListener<\/code> \u5904\u7406\u8fc7\u590d\u6742\u7684\u4ea4\u4e92\u903b\u8f91\uff0c\u6216\u8005\u7528 Promise<\/code> \u94fe\u5f0f\u8c03\u7528\u8fc7\u591a\u4e2a\u5f02\u6b65\u8bf7\u6c42\uff0c\u4f60\u53ef\u80fd\u4f1a\u9047\u5230\u8fd9\u6837\u7684\u56f0\u5883\uff1a\u53d6\u6d88\u64cd\u4f5c\u56f0\u96be\u3001\u7ec4\u5408\u591a\u4e2a\u6570\u636e\u6e90\u7e41\u7410\u3001\u9519\u8bef\u5904\u7406\u5206\u6563<\/strong>\u3002RxJS \u63d0\u4f9b\u4e86\u4e00\u79cd\u7edf\u4e00\u7684\u8303\u5f0f\u2014\u2014\u628a\u4e00\u5207\u5f02\u6b65\u4e8b\u4ef6\u89c6\u4e3a\u201c\u6d41\u201d\uff0c\u901a\u8fc7\u64cd\u4f5c\u7b26\u8fdb\u884c\u58f0\u660e\u5f0f\u7ec4\u5408\u3002<\/p>\n

\u672c\u6587\u4e0d\u4f1a\u7f57\u5217\u6240\u6709\u64cd\u4f5c\u7b26\uff0c\u800c\u662f\u901a\u8fc7\u4e00\u4e2a\u771f\u5b9e\u573a\u666f\uff1a\u5b9e\u65f6\u641c\u7d22\uff08\u8f93\u5165\u5173\u952e\u8bcd\uff0c\u9632\u6296\u540e\u8bf7\u6c42 API\uff0c\u5e76\u5904\u7406\u7ade\u6001\uff09<\/strong>\uff0c\u5e26\u4f60\u638c\u63e1 RxJS \u7684\u6838\u5fc3 20% \u77e5\u8bc6\uff0c\u89e3\u51b3 80% \u7684\u95ee\u9898\u3002<\/p>\n

\u73af\u5883\u51c6\u5907<\/h2>\n

\u6211\u4eec\u4f7f\u7528 TypeScript \u548c RxJS 7.x\u3002\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee\uff1a<\/p>\n

\nmkdir rxjs-search-demo && cd rxjs-search-demo\nnpm init -y\nnpm install rxjs typescript ts-node @types\/node\nnpx tsc --init --target es2017 --module commonjs\n<\/code><\/pre>\n
\u4e3a\u4e86\u6a21\u62df API\uff0c\u6211\u4eec\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u51fd\u6570\uff0c\u8fd4\u56de Promise \u5e76\u968f\u673a\u5ef6\u8fdf\uff1a<\/p>\n
\n\/\/ mock-api.ts\nexport function searchApi(keyword: string): Promise<string[]> {\n  const delay = Math.random() * 1000 + 200;\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve([`${keyword}-\u7ed3\u679c1`, `${keyword}-\u7ed3\u679c2`, `${keyword}-\u7ed3\u679c3`]);\n    }, delay);\n  });\n}\n<\/code><\/pre>\n
\u7b2c\u4e00\u6b65\uff1a\u521b\u5efa\u6d41\u2014\u2014\u4ece\u4e8b\u4ef6\u5230 Observable<\/h2>\n
RxJS \u7684\u6838\u5fc3\u662f Observable<\/code>\uff0c\u5b83\u4ee3\u8868\u4e00\u4e2a\u53ef\u88ab\u89c2\u5bdf\u7684\u6570\u636e\u6d41\u3002\u6211\u4eec\u53ef\u4ee5\u7528 fromEvent<\/code> \u5c06 DOM \u4e8b\u4ef6\u8f6c\u4e3a\u6d41\uff1a<\/p>\n
\nimport { fromEvent } from 'rxjs';\n\nconst input = document.createElement('input');\ndocument.body.appendChild(input);\n\nconst input$ = fromEvent<InputEvent>(input, 'input');\ninput$.subscribe(event => {\n  console.log('\u8f93\u5165\u503c:', (event.target as HTMLInputElement).value);\n});\n<\/code><\/pre>\n
\u6ce8\u610f<\/strong>\uff1a$<\/code> \u540e\u7f00\u662f\u793e\u533a\u7ea6\u5b9a\uff0c\u8868\u793a\u8fd9\u662f\u4e00\u4e2a Observable\uff0c\u4e0d\u662f\u5f3a\u5236\u8bed\u6cd5\u3002<\/p>\n
\u4f46\u76f4\u63a5\u8ba2\u9605\u4f1a\u4e3a\u6bcf\u6b21\u51fb\u952e\u89e6\u53d1\uff0c\u6211\u4eec\u9700\u8981\u66f4\u7cbe\u7ec6\u7684\u63a7\u5236\u3002<\/p>\n
\u7b2c\u4e8c\u6b65\uff1a\u64cd\u4f5c\u7b26\u7ba1\u9053\u2014\u2014\u58f0\u660e\u5f0f\u5904\u7406\u6d41<\/h2>\n
\u64cd\u4f5c\u7b26\u662f\u8fd4\u56de\u65b0 Observable \u7684\u7eaf\u51fd\u6570\u3002\u6211\u4eec\u7528 pipe<\/code> \u5c06\u5b83\u4eec\u4e32\u8054\uff1a<\/p>\n
\nimport { fromEvent, map, debounceTime, distinctUntilChanged } from 'rxjs';\n\nconst search$ = fromEvent<InputEvent>(input, 'input').pipe(\n  map(e => (e.target as HTMLInputElement).value.trim()),\n  debounceTime(300),          \/\/ \u7b49\u5f85300ms\u65e0\u65b0\u8f93\u5165\n  distinctUntilChanged()      \/\/ \u4ec5\u5728\u503c\u53d8\u5316\u65f6\u53d1\u51fa\n);\n\nsearch$.subscribe(keyword => {\n  console.log('\u51c6\u5907\u641c\u7d22:', keyword);\n});\n<\/code><\/pre>\n
    \n
  • map<\/code>\uff1a\u8f6c\u6362\u4e8b\u4ef6\u4e3a\u8f93\u5165\u503c<\/li>\n
  • debounceTime<\/code>\uff1a\u9632\u6296\uff0c\u907f\u514d\u9891\u7e41\u8bf7\u6c42<\/li>\n
  • distinctUntilChanged<\/code>\uff1a\u8df3\u8fc7\u91cd\u590d\u503c<\/li>\n<\/ul>\n
    \ud83d\udca1 \u63d0\u793a<\/strong>\uff1a\u64cd\u4f5c\u7b26\u987a\u5e8f\u81f3\u5173\u91cd\u8981\u3002\u5982\u679c\u5148 distinctUntilChanged<\/code> \u518d debounceTime<\/code>\uff0c\u9632\u6296\u4f1a\u4f5c\u7528\u4e8e\u53bb\u91cd\u540e\u7684\u6d41\uff0c\u6548\u679c\u4e0d\u540c\u3002\u901a\u5e38\u5148\u9632\u6296\u518d\u53bb\u91cd\u66f4\u7b26\u5408\u76f4\u89c9\u3002<\/p>\n
    \u7b2c\u4e09\u6b65\uff1a\u5207\u6362\u6d41\u2014\u2014\u89e3\u51b3\u7ade\u6001\u6761\u4ef6<\/h2>\n
    \u5f53\u7528\u6237\u5feb\u901f\u8f93\u5165\u65f6\uff0c\u591a\u4e2a\u8bf7\u6c42\u53ef\u80fd\u4e71\u5e8f\u8fd4\u56de\u3002\u6211\u4eec\u9700\u8981\u201c\u53d6\u6d88\u201d\u4e4b\u524d\u7684\u8bf7\u6c42\uff0c\u53ea\u4fdd\u7559\u6700\u65b0\u7ed3\u679c\u3002\u8fd9\u65f6\u7528 switchMap<\/code>\uff1a<\/p>\n
    \nimport { fromEvent, map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs';\nimport { from } from 'rxjs';\nimport { searchApi } from '.\/mock-api';\n\nconst results$ = fromEvent<InputEvent>(input, 'input').pipe(\n  map(e => (e.target as HTMLInputElement).value.trim()),\n  debounceTime(300),\n  distinctUntilChanged(),\n  switchMap(keyword => from(searchApi(keyword)))  \/\/ \u5c06Promise\u8f6c\u4e3aObservable\n);\n\nresults$.subscribe(results => {\n  console.log('\u641c\u7d22\u7ed3\u679c:', results);\n});\n<\/code><\/pre>\n
    switchMap<\/code> \u4f1a\u8ba2\u9605\u6700\u65b0\u7684\u5185\u90e8 Observable\uff0c\u5e76\u53d6\u6d88\u524d\u4e00\u4e2a\u3002\u8fd9\u662f\u5904\u7406\u641c\u7d22\u3001\u81ea\u52a8\u8865\u5168\u7b49\u573a\u666f\u7684\u9ec4\u91d1\u6cd5\u5219\u3002<\/p>\n
    \u6ce8\u610f<\/strong>\uff1aswitchMap<\/code> \u9002\u5408\u201c\u53d6\u6d88\u65e7\u8bf7\u6c42\u201d\uff0c\u4f46\u5982\u679c\u4f60\u9700\u8981\u5e76\u884c\u8bf7\u6c42\u4e14\u4e0d\u53d6\u6d88\uff08\u5982\u4e0a\u4f20\u591a\u4e2a\u6587\u4ef6\uff09\uff0c\u5e94\u4f7f\u7528 mergeMap<\/code>\u3002<\/p>\n
    \u7b2c\u56db\u6b65\uff1a\u9519\u8bef\u5904\u7406\u4e0e\u91cd\u8bd5<\/h2>\n
    \u7f51\u7edc\u8bf7\u6c42\u53ef\u80fd\u5931\u8d25\u3002RxJS \u7684\u9519\u8bef\u4f1a\u7ec8\u6b62\u6d41\uff0c\u6211\u4eec\u9700\u8981 catchError<\/code> \u6765\u6062\u590d\uff1a<\/p>\n
    \nimport { catchError, retry } from 'rxjs\/operators';\nimport { of } from 'rxjs';\n\nconst results$ = fromEvent<InputEvent>(input, 'input').pipe(\n  map(e => (e.target as HTMLInputElement).value.trim()),\n  debounceTime(300),\n  distinctUntilChanged(),\n  switchMap(keyword =>\n    from(searchApi(keyword)).pipe(\n      retry(2),  \/\/ \u5931\u8d25\u91cd\u8bd52\u6b21\n      catchError(err => {\n        console.error('\u641c\u7d22\u5931\u8d25:', err);\n        return of([]);  \/\/ \u8fd4\u56de\u7a7a\u6570\u7ec4\uff0c\u4fdd\u6301\u6d41\u7ee7\u7eed\n      })\n    )\n  )\n);\n<\/code><\/pre>\n
    \ud83d\udca1 \u6700\u4f73\u5b9e\u8df5<\/strong>\uff1acatchError<\/code> \u5e94\u653e\u5728\u5185\u90e8\u7ba1\u9053\u4e2d\uff0c\u8fd9\u6837\u5355\u4e2a\u8bf7\u6c42\u5931\u8d25\u4e0d\u4f1a\u7ec8\u6b62\u6574\u4e2a\u641c\u7d22\u6d41\u3002<\/p>\n
    \u7b2c\u4e94\u6b65\uff1a\u7ba1\u7406\u8ba2\u9605\u2014\u2014\u907f\u514d\u5185\u5b58\u6cc4\u6f0f<\/h2>\n
    \u624b\u52a8 subscribe<\/code> \u9700\u8981\u624b\u52a8\u53d6\u6d88\u3002\u5728\u7ec4\u4ef6\u4e2d\uff0c\u6211\u4eec\u901a\u5e38\u7528 Subscription<\/code> \u6216 takeUntil<\/code> \u6765\u7ba1\u7406\uff1a<\/p>\n
    \nimport { Subject, takeUntil } from 'rxjs';\n\nconst destroy$ = new Subject<void>();\n\nresults$.pipe(takeUntil(destroy$)).subscribe(results => {\n  \/\/ \u66f4\u65b0UI\n});\n\n\/\/ \u7ec4\u4ef6\u9500\u6bc1\u65f6\ndestroy$.next();\ndestroy$.complete();\n<\/code><\/pre>\n
    \u5bf9\u4e8e Angular \u7528\u6237\uff0c\u53ef\u4ee5\u4f7f\u7528 async<\/code> \u7ba1\u9053\u81ea\u52a8\u7ba1\u7406\u3002\u5728 React \u4e2d\uff0c\u53ef\u4ee5\u5728 useEffect<\/code> \u7684\u6e05\u7406\u51fd\u6570\u4e2d\u53d6\u6d88\u8ba2\u9605\u3002<\/p>\n
    \u8fdb\u9636\uff1a\u7ec4\u5408\u591a\u4e2a\u6d41<\/h2>\n
    \u5b9e\u9645\u573a\u666f\u4e2d\uff0c\u6211\u4eec\u53ef\u80fd\u9700\u8981\u540c\u65f6\u76d1\u542c\u8f93\u5165\u548c\u6309\u94ae\u70b9\u51fb\u3002\u7528 combineLatest<\/code> \u6216 withLatestFrom<\/code>\uff1a<\/p>\n
    \nimport { combineLatest } from 'rxjs';\n\nconst filter$ = fromEvent<InputEvent>(filterInput, 'input').pipe(\n  map(e => (e.target as HTMLInputElement).value)\n);\n\nconst combined$ = combineLatest([search$, filter$]).pipe(\n  map(([keyword, filter]) => ({ keyword, filter }))\n);\n<\/code><\/pre>\n
    combineLatest<\/code> \u4f1a\u5728\u4efb\u610f\u6e90\u53d1\u51fa\u65f6\uff0c\u7ec4\u5408\u6700\u65b0\u503c\u3002\u9002\u5408\u8868\u5355\u591a\u5b57\u6bb5\u8054\u52a8\u3002<\/p>\n
    \u5e38\u89c1\u5751\u4e0e\u907f\u5751\u6307\u5357<\/h2>\n
      \n
    1. \u5fd8\u8bb0\u8ba2\u9605<\/strong>\uff1aObservable \u662f\u51b7\u542f\u52a8\uff0c\u4e0d\u8ba2\u9605\u4e0d\u4f1a\u6267\u884c\u3002<\/li>\n
    2. \u64cd\u4f5c\u7b26\u987a\u5e8f\u9519\u8bef<\/strong>\uff1a\u5982 debounceTime<\/code> \u653e\u5728 switchMap<\/code> \u4e4b\u540e\u4f1a\u5bfc\u81f4\u8bf7\u6c42\u65e0\u6cd5\u53d6\u6d88\u3002<\/li>\n
    3. \u65e0\u9650\u6d41<\/strong>\uff1ainterval<\/code> \u7b49\u65e0\u9650\u6d41\u9700\u914d\u5408 take<\/code> \u6216 takeUntil<\/code> \u4f7f\u7528\u3002<\/li>\n
    4. \u9519\u8bef\u5904\u7406\u4f4d\u7f6e<\/strong>\uff1a\u5728\u5916\u90e8 catchError<\/code> \u4f1a\u7ec8\u6b62\u6574\u4e2a\u6d41\uff0c\u5e94\u5c3d\u91cf\u5728\u5185\u90e8\u5904\u7406\u3002<\/li>\n
    5. \u6027\u80fd<\/strong>\uff1a\u5927\u91cf\u6570\u636e\u6d41\u65f6\uff0c\u4f7f\u7528 share<\/code> \u6216 shareReplay<\/code> \u907f\u514d\u91cd\u590d\u8ba2\u9605\u3002<\/li>\n<\/ol>\n
      \u603b\u7ed3<\/h2>\n
      RxJS \u7684\u5b66\u4e60\u66f2\u7ebf\u4e3b\u8981\u5728\u4e8e\u601d\u7ef4\u8f6c\u53d8\uff1a\u4ece\u201c\u547d\u4ee4\u5f0f\u5904\u7406\u4e8b\u4ef6\u201d\u5230\u201c\u58f0\u660e\u5f0f\u7ec4\u5408\u6d41\u201d\u3002\u6838\u5fc3\u8981\u70b9\uff1a<\/p>\n
        \n
      • \u7528 fromEvent<\/code>\u3001from<\/code>\u3001of<\/code> \u521b\u5efa\u6d41\u3002<\/li>\n
      • \u7528 pipe<\/code> \u548c\u64cd\u4f5c\u7b26\u8fdb\u884c\u8f6c\u6362\u3001\u8fc7\u6ee4\u3001\u7ec4\u5408\u3002<\/li>\n
      • \u7528 switchMap<\/code> \u5904\u7406\u7ade\u6001\uff0ccatchError<\/code> \u6062\u590d\u9519\u8bef\u3002<\/li>\n
      • \u7528 takeUntil<\/code> \u7ba1\u7406\u8ba2\u9605\u751f\u547d\u5468\u671f\u3002<\/li>\n<\/ul>\n
        \u4e0b\u4e00\u6b65\uff0c\u4f60\u53ef\u4ee5\u63a2\u7d22 Subject<\/code> \u5b9e\u73b0\u591a\u64ad\u3001scan<\/code> \u5b9e\u73b0\u72b6\u6001\u7ba1\u7406\uff0c\u6216\u7ed3\u5408\u6846\u67b6\uff08Angular\u3001React\uff09\u7684\u96c6\u6210\u6a21\u5f0f\u3002\u8bb0\u4f4f\uff1a\u4e0d\u8981\u4e3a\u4e86\u7528 RxJS \u800c\u7528 RxJS<\/strong>\uff0c\u5f53\u4f60\u7684\u5f02\u6b65\u903b\u8f91\u53d8\u5f97\u590d\u6742\u65f6\uff0c\u5b83\u624d\u662f\u5229\u5668\u3002<\/p>\n
        \u5ef6\u4f38\u9605\u8bfb<\/h2>\n
          \n
        • RxJS \u5b98\u65b9\u6587\u6863\uff1ahttps:\/\/rxjs.dev\/<\/li>\n
        • \u5f39\u73e0\u56fe\u7406\u89e3\u64cd\u4f5c\u7b26\uff1ahttps:\/\/rxmarbles.com\/<\/li>\n
        • \u5b66\u4e60\u8d44\u6e90\uff1aRxJS in Action<\/em> \u4e00\u4e66<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
          \u672c\u6587\u9762\u5411\u6709\u4e00\u5230\u4e09\u5e74\u7ecf\u9a8c\u7684\u5f00\u53d1\u8005\uff0c\u901a\u8fc7\u6784\u5efa\u4e00\u4e2a\u5b9e\u65f6\u641c\u7d22\u529f\u80fd\uff0c\u7cfb\u7edf\u8bb2\u89e3 RxJS \u7684\u6838\u5fc3\u6982\u5ff5\u3001\u64cd\u4f5c\u7b26\u4e0e\u6700\u4f73\u5b9e\u8df5\u3002\u4f60\u5c06\u5b66\u4f1a\u7528\u54cd\u5e94\u5f0f\u601d\u7ef4\u5904\u7406\u5f02\u6b65\u6570\u636e\u6d41\uff0c\u5e76\u907f\u5f00\u5e38\u89c1\u9677\u9631\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":[247,40,36,248,103],"class_list":["post-266","post","type-post","status-publish","format-standard","hentry","category-3","category-4","tag-rxjs","tag-typescript","tag-36","tag-248","tag-103"],"_links":{"self":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/266","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=266"}],"version-history":[{"count":0,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/266\/revisions"}],"wp:attachment":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}