RxJS 管道運算符

2020-10-09 15:31 更新

從5.5版開始，我們已經(jīng)發(fā)布了“可移植運算符”，可以在 進行訪問 rxjs/operators（請注意復數(shù)的“運算符”）中 。 與 找到的“ patch”運算符相比，這些方法是僅引入所需運算符的更好方法 rxjs-compat打包中 。

注意 ：使用 rxjs或 rxjs/operators不更改構建過程可能會導致捆綁包增大。 請參閱 已知問題” 下面的“ 部分。

重命名運營商

由于使運算符獨立于 Observable 可用，因此運算符名稱不能與 JavaScript 關鍵字限制沖突。 因此，某些運算符的可移植版本的名稱已更改。 這些運算符是：

  1. do-> tap
  2. catch-> catchError
  3. switch-> switchAll
  4. finally-> finalize

該 let運算符現(xiàn)在是 一部分， Observableas 的 pipe無法導入。 

  1. source$.let(myOperator) -> source$.pipe(myOperator)

請參閱下面的“ 建立自己的運營商 ”。

前 toPromise()“操作員”已被刪除 因為運算符返回 Observable， 不是一個 Promise。 現(xiàn)在有一個 Observable.toPromise()實例方法。

為什么？

修補的點鏈運算符的問題是：

  1. 導入修補程序運算符的任何庫 增加 Observable.prototype都將為該庫的所有使用者 ，從而造成盲目依賴。 如果庫刪除了它們的用法，它們將在不知不覺中破壞其他所有人。 使用 pipeable，必須將所需的運算符導入使用它們的每個文件中。

  1. 直接 到原型的操作員無法 “搖晃樹”匯總 通過匯總或 Webpack 之類的工具 。 可管道運算符將像直接從模塊中引入的函數(shù)一樣。

應用程序中導入的未使用的運算符無法通過任何類型的構建工具或 lint 規(guī)則可靠地檢測到。 這意味著您可以導入 scan，但停止使用它，并且仍將其添加到您的輸出包中。 對于可管道運算符，如果您不使用它，則可以使用皮棉規(guī)則為您選擇它。

功能組成很棒。 建立您自己的自定義運算符變得容易得多，現(xiàn)在它們可以正常工作，并且看起來就像 rxjs 中的所有其他運算符一樣。 您不需要擴展 Observable 或覆蓋它 lift。

什么？

什么是管道運算符？ 簡而言之，可以與當前 一起使用的函數(shù) let運算符 。 它曾經(jīng)是名稱（“ lettable”）的起源，但是這令人困惑，因此我們現(xiàn)在將它們稱為“ pipeable”，因為它們打算與 一起使用 pipe實用程序 。 可管道運算符基本上是任何返回帶有簽名的函數(shù)的函數(shù)： <T, R>(source: Observable<T>) => Observable<R>。

有一個 的 pipe內(nèi)置 方法 Observable現(xiàn)在， Observable.prototype.pipe可以用來像與點鏈接所用的相似方式組成運算符（如下所示）。

還 pipe可以從導入實用程序功能 import { pipe } from 'rxjs';。 該 pipe功能可用于從其他管道運算符構建可重用的管道運算符。 例如： 

  1. import { pipe } from 'rxjs';
  2. import { map } from 'rxjs/operators';
  5. const mapTwice = <T,R>(fn: (value: T, index: number) => R) => pipe(map(fn), map(fn));

用法

您可以在 下從一個位置引入所需的任何運算符 'rxjs/operators'（ 復數(shù)！ ） 。 還建議直接使用所需的 Observable 創(chuàng)建方法，如下所示 range： 

  1. import { range } from 'rxjs';
  2. import { map, filter, scan } from 'rxjs/operators';
  5. const source$ = range(0, 10);
  8. source$.pipe(
  9.   filter(x => x % 2 === 0),
  10.   map(x => x + x),
  11.   scan((acc, x) => acc + x, 0)
  12. )
  13. .subscribe(x => console.log(x))
  16. // Logs:
  17. // 0
  18. // 4
  19. // 12
  20. // 24
  21. // 40

輕松建立自己的運營商

實際上，您 始終 來 可以使用 做到這一點， let... 但是構建自己的運算符現(xiàn)在就像編寫函數(shù)一樣簡單。 注意，您可以將自定義運算符與其他 rxjs 運算符無縫組合在一起。 

  1. import { Observable, interval } from 'rxjs';
  2. import { filter, map, take, toArray } from 'rxjs/operators';
  5. /**
  6.  * an operator that takes every Nth value
  7.  */
  8. const takeEveryNth = (n: number) => <T>(source: Observable<T>) =>
  9.   new Observable<T>(observer => {
  10.     let count = 0;
  11.     return source.subscribe({
  12.       next(x) {
  13.         if (count++ % n === 0) observer.next(x);
  14.       },
  15.       error(err) { observer.error(err); },
  16.       complete() { observer.complete(); }
  17.     })
  18.   });
  21. /**
  22.  * You can also use an existing operator like so
  23.  */
  24. const takeEveryNthSimple = (n: number) => <T>(source: Observable<T>) =>
  25.   source.pipe(filter((value, index) => index % n === 0 ))
  28. /**
  29.  * And since pipeable operators return functions, you can further simplify like so
  30.  */
  31. const takeEveryNthSimplest = (n: number) => filter((value, index) => index % n === 0);
  34. interval(1000).pipe(
  35.   takeEveryNth(2),
  36.   map(x => x + x),
  37.   takeEveryNthSimple(3),
  38.   map(x => x * x),
  39.   takeEveryNthSimplest(4),
  40.   take(3),
  41.   toArray()
  42. )
  43. .subscribe(x => console.log(x));
  44. // Logs:
  45. // [0, 2304, 9216]

已知的問題

打字稿<2.4

在 TypeScript 2.3及更低版本中，由于無法在 TypeScript 2.4之前推斷類型，因此需要將類型添加到傳遞給運算符的函數(shù)中。 在 TypeScript 2.4中，類型將通過合成正確推斷。

TS 2.3 and under

  1. range(0, 10).pipe(
  2.   map((n: number) => n + '!'),
  3.   map((s: string) => 'Hello, ' + s),
  4. ).subscribe(x => console.log(x))

TS 2.4 以上 

  1. range(0, 10).pipe(
  2.   map(n => n + '!'),
  3.   map(s => 'Hello, ' + s),
  4. ).subscribe(x => console.log(x))

建造和搖樹

從清單文件（或重新導出）導入時，應用程序捆綁有時會增長。 現(xiàn)在可以從中導入可管道運算符 rxjs/operators，但是在不更改生成過程的情況下這樣做通常會導致應用程序包更大。 這是因為默認情況下 rxjs/operators將解析為 rxjs 的 CommonJS 輸出。

為了使用新的管道運算符而不增加捆綁包的大小，您將需要更改 Webpack 配置。 這僅適用于 Webpack 3+，因為它依賴于 的新 ModuleConcatenationPluginWebpack 3 中 功能。

路徑映射

與 rxjs 5.5 一起發(fā)布的是帶有 ES5 和 ES2015 語言級別的 ECMAScript 模塊格式（導入和導出）的 rxjs 構建。 您可以在 找到這些分布 node_modules/rxjs/_esm5和中 node_modules/rxjs/_esm2015（“ esm”代表 ECMAScript 模塊，數(shù)字“ 5”或“ 2015”代表 ES 語言級別）。 在應用程序源代碼中，應從導入 rxjs/operators，但在 Webpack 配置文件中，將需要將導入重新映射為 ESM5（或 ESM2015）版本。

如果是 require('rxjs/_esm5/path-mapping')，您將收到一個函數(shù)，該函數(shù)返回鍵-值對的對象，將每個輸入映射到其在磁盤上的文件位置。 使用此映射，如下所示：

webpack.config.js

配置簡單： 

  1. const rxPaths = require('rxjs/_esm5/path-mapping');
  2. const webpack = require('webpack');
  3. const path = require('path');
  6. module.exports = {
  7.   entry: 'index.js',
  8.   output: 'bundle.js',
  9.   resolve: {
  10.     // Use the "alias" key to resolve to an ESM distribution
  11.     alias: rxPaths()
  12.   },
  13.   plugins: [
  14.     new webpack.optimize.ModuleConcatenationPlugin()
  15.   ]
  16. };

更完整的配置（更接近實際場景）： 

  1. const webpack = require('webpack');
  2. const path = require('path');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const DashboardPlugin = require('webpack-dashboard/plugin');
  5. const nodeEnv = process.env.NODE_ENV || 'development';
  6. const isProd = nodeEnv === 'production';
  7. const rxPaths = require('rxjs/_esm5/path-mapping');
  10. var config = {
  11.     devtool: isProd ? 'hidden-source-map' : 'cheap-eval-source-map',
  12.     context: path.resolve('./src'),
  13.     entry: {
  14.         app: './index.ts',
  15.         vendor: './vendor.ts'
  16.     },
  17.     output: {
  18.         path: path.resolve('./dist'),
  19.         filename: '[name].bundle.js',
  20.         sourceMapFilename: '[name].map',
  21.         devtoolModuleFilenameTemplate: function (info) {
  22.             return "file:///" + info.absoluteResourcePath;
  23.         }
  24.     },
  25.     module: {
  26.         rules: [
  27.             { enforce: 'pre', test: /\.ts$|\.tsx$/, exclude: ["node_modules"], loader: 'ts-loader' },
  28.             { test: /\.html$/, loader: "html" },
  29.             { test: /\.css$/, loaders: ['style', 'css'] }
  30.         ]
  31.     },
  32.     resolve: {
  33.         extensions: [".ts", ".js"],
  34.         modules: [path.resolve('./src'), 'node_modules'],
  35.         alias: rxPaths()
  36.     },
  37.     plugins: [
  38.         new webpack.DefinePlugin({
  39.             'process.env': { // eslint-disable-line quote-props
  40.                 NODE_ENV: JSON.stringify(nodeEnv)
  41.             }
  42.         }),
  43.         new webpack.HashedModuleIdsPlugin(),
  44.         new webpack.optimize.ModuleConcatenationPlugin(),
  45.         new HtmlWebpackPlugin({
  46.             title: 'Typescript Webpack Starter',
  47.             template: '!!ejs-loader!src/index.html'
  48.         }),
  49.         new webpack.optimize.CommonsChunkPlugin({
  50.             name: 'vendor',
  51.             minChunks: Infinity,
  52.             filename: 'vendor.bundle.js'
  53.         }),
  54.         new webpack.optimize.UglifyJsPlugin({
  55.             mangle: false,
  56.             compress: { warnings: false, pure_getters: true, passes: 3, screw_ie8: true, sequences: false },
  57.             output: { comments: false, beautify: true },
  58.             sourceMap: false
  59.         }),
  60.         new DashboardPlugin(),
  61.         new webpack.LoaderOptionsPlugin({
  62.             options: {
  63.                 tslint: {
  64.                     emitErrors: true,
  65.                     failOnHint: true
  66.                 }
  67.             }
  68.         })
  69.     ]
  70. };
  73. module.exports = config;
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號